Fejlécek
Aranymetszés
Élő előnézet – a komponens teljes méretben.
Élő előnézet
HTML · CSS · JS
<section class="hero-aranymetszes" id="heroAranymetszes">
<div class="am-glow am-glow-1"></div>
<div class="am-glow am-glow-2"></div>
<div class="am-grain"></div>
<div class="am-light"></div>
<div class="am-decor">
<span></span>
<span></span>
<span></span>
</div>
<div class="am-content">
<div class="am-kicker">
<span></span>
<em class="am-typing"></em>
<i></i>
</div>
<h1 class="am-title" aria-label="A szépség részleteiben él">
<span class="am-line">
<span>A szépség</span>
</span>
<span class="am-line am-gold-line">
<span>részleteiben</span>
</span>
<span class="am-line am-last-line">
<span>él.</span>
</span>
</h1>
<p class="am-text">
Amikor a forma, a fény és a részletek
tökéletes egyensúlyba kerülnek.
</p>
<a href="#" class="am-button">
Felfedezem
<span>↗</span>
</a>
</div>
<div class="am-orb">
<div class="am-orb-inner"></div>
<div class="am-orb-ring"></div>
</div>
<div class="am-number">
<span>12</span>
<i></i>
<small>FORMA · FÉNY · RÉSZLET</small>
</div>
</section>
.hero-aranymetszes {
position: relative;
min-height: 720px;
height: 88vh;
max-height: 900px;
overflow: hidden;
isolation: isolate;
color: #f7eee1;
background:
radial-gradient(
circle at 76% 40%,
rgba(181, 137, 68, .20),
transparent 25%
),
radial-gradient(
circle at 15% 80%,
rgba(102, 57, 28, .35),
transparent 34%
),
linear-gradient(
135deg,
#24150f 0%,
#382117 46%,
#1c100b 100%
);
/* maga a fejléc aszimmetrikus */
clip-path: polygon(
0 0,
100% 0,
100% 82%,
0 100%
);
}
/* =========================
FINOM SZEMCSÉZETT FELÜLET
========================= */
.hero-aranymetszes .am-grain {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .12;
background-image:
url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
mix-blend-mode: overlay;
}
/* =========================
FÉNYFOLTOK
========================= */
.hero-aranymetszes .am-glow {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(18px);
}
.hero-aranymetszes .am-glow-1 {
width: 500px;
height: 500px;
right: -100px;
top: -130px;
background:
radial-gradient(
circle,
rgba(213, 170, 92, .22),
transparent 68%
);
animation:
amGlowOne
8s
ease-in-out
infinite
alternate;
}
.hero-aranymetszes .am-glow-2 {
width: 400px;
height: 400px;
left: -170px;
bottom: -170px;
background:
radial-gradient(
circle,
rgba(128, 72, 35, .24),
transparent 70%
);
animation:
amGlowTwo
10s
ease-in-out
infinite
alternate;
}
@keyframes amGlowOne {
from {
transform:
translate(0, 0)
scale(.92);
}
to {
transform:
translate(-35px, 40px)
scale(1.12);
}
}
@keyframes amGlowTwo {
from {
transform:
translate(20px, -10px)
scale(.9);
}
to {
transform:
translate(-25px, 25px)
scale(1.08);
}
}
/* =========================
MOZGÓ ARANYFÉNY
========================= */
.hero-aranymetszes .am-light {
position: absolute;
z-index: 2;
width: 240px;
height: 150%;
left: 66%;
top: -30%;
background:
linear-gradient(
to right,
transparent,
rgba(225, 185, 103, .06),
rgba(255, 219, 145, .20),
rgba(225, 185, 103, .06),
transparent
);
transform: rotate(22deg);
filter: blur(9px);
opacity: .5;
animation:
amLightMove
9s
ease-in-out
infinite;
}
@keyframes amLightMove {
0%,
100% {
translate: -320px 0;
opacity: 0;
}
30% {
opacity: .45;
}
60% {
opacity: .45;
}
100% {
translate: 320px 0;
opacity: 0;
}
}
/* =========================
DEKORATÍV VONALAK
========================= */
.hero-aranymetszes .am-decor {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
.hero-aranymetszes .am-decor span {
position: absolute;
display: block;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(211, 166, 86, .55),
transparent
);
transform: rotate(-18deg);
opacity: .45;
}
.hero-aranymetszes .am-decor span:nth-child(1) {
width: 210px;
top: 22%;
right: 17%;
animation:
amDecorOne
6s
ease-in-out
infinite
alternate;
}
.hero-aranymetszes .am-decor span:nth-child(2) {
width: 120px;
top: 39%;
right: 7%;
animation:
amDecorTwo
5s
ease-in-out
infinite
alternate;
}
.hero-aranymetszes .am-decor span:nth-child(3) {
width: 270px;
top: 69%;
right: 10%;
animation:
amDecorThree
7s
ease-in-out
infinite
alternate;
}
@keyframes amDecorOne {
from {
translate: 0 0;
opacity: .2;
}
to {
translate: 30px -16px;
opacity: .7;
}
}
@keyframes amDecorTwo {
from {
translate: 0 0;
opacity: .2;
}
to {
translate: -20px 12px;
opacity: .6;
}
}
@keyframes amDecorThree {
from {
translate: 0 0;
opacity: .2;
}
to {
translate: 25px -10px;
opacity: .65;
}
}
/* =========================
TARTALOM
========================= */
.hero-aranymetszes .am-content {
position: relative;
z-index: 5;
width: min(720px, 88%);
margin-left: 10%;
padding-top: 15vh;
}
/* =========================
KICKER
========================= */
.hero-aranymetszes .am-kicker {
display: flex;
align-items: center;
gap: 13px;
margin-bottom: 28px;
color: #d7ae68;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: .27em;
text-transform: uppercase;
}
.hero-aranymetszes .am-kicker span {
width: 38px;
height: 1px;
background: #c99b50;
}
.hero-aranymetszes .am-kicker i {
width: 1px;
height: 13px;
background: #c99b50;
animation:
amCursor
.7s
steps(1)
infinite;
}
@keyframes amCursor {
50% {
opacity: 0;
}
}
/* =========================
FŐCÍM
========================= */
.hero-aranymetszes .am-title {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(68px, 8.4vw, 138px);
line-height: .83;
font-weight: 400;
letter-spacing: -.065em;
}
/* a sorok maszkként működnek */
.hero-aranymetszes .am-line {
display: block;
overflow: hidden;
padding-bottom: .08em;
}
.hero-aranymetszes .am-line > span {
display: inline-block;
opacity: 0;
transform:
translateY(115%)
rotate(4deg);
animation:
amTitleReveal
1.15s
cubic-bezier(.16, .85, .25, 1)
forwards;
}
/* első sor */
.hero-aranymetszes .am-line:nth-child(1) > span {
animation-delay: .15s;
}
/* második sor */
.hero-aranymetszes .am-gold-line {
margin-left: 13%;
}
.hero-aranymetszes .am-gold-line > span {
color: #d8ae65;
font-style: italic;
animation-delay: .38s;
}
/* harmadik sor */
.hero-aranymetszes .am-last-line {
margin-left: 34%;
}
.hero-aranymetszes .am-last-line > span {
color: #f5ead9;
animation-delay: .62s;
}
@keyframes amTitleReveal {
0% {
opacity: 0;
transform:
translateY(115%)
rotate(4deg);
}
65% {
opacity: 1;
}
100% {
opacity: 1;
transform:
translateY(0)
rotate(0);
}
}
/* arany fény végigsiklik a címen */
.hero-aranymetszes .am-gold-line {
position: relative;
}
.hero-aranymetszes .am-gold-line::after {
content: "";
position: absolute;
left: -20%;
top: 8%;
width: 14%;
height: 84%;
background:
linear-gradient(
90deg,
transparent,
rgba(255,239,188,.95),
transparent
);
transform: skewX(-18deg);
opacity: 0;
animation:
amTitleShine
1.6s
1.05s
ease-out
forwards;
}
@keyframes amTitleShine {
0% {
left: -20%;
opacity: 0;
}
15% {
opacity: 1;
}
100% {
left: 115%;
opacity: 0;
}
}
/* =========================
LEÍRÁS
========================= */
.hero-aranymetszes .am-text {
max-width: 450px;
margin:
38px 0 28px 3px;
color:
rgba(247, 238, 225, .62);
font-family:
Arial,
sans-serif;
font-size: 16px;
line-height: 1.8;
opacity: 0;
animation:
amFadeUp
1s
.95s
ease
forwards;
}
/* =========================
GOMB
========================= */
.hero-aranymetszes .am-button {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 14px 21px;
color: #2a170d;
background:
linear-gradient(
135deg,
#c99b50,
#e4c27f
);
text-decoration: none;
font-family:
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
opacity: 0;
animation:
amFadeUp
1s
1.1s
ease
forwards;
transition:
transform .35s ease,
box-shadow .35s ease;
}
.hero-aranymetszes .am-button span {
font-size: 19px;
line-height: 1;
}
.hero-aranymetszes .am-button:hover {
transform: translateY(-4px);
box-shadow:
0 16px 35px
rgba(207, 161, 82, .22);
}
@keyframes amFadeUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* =========================
JOBB OLDALI FÉNYGÖMB
========================= */
.hero-aranymetszes .am-orb {
position: absolute;
z-index: 3;
right: 10%;
top: 21%;
width: 330px;
height: 330px;
border-radius: 50%;
border:
1px solid
rgba(215, 174, 104, .22);
animation:
amOrbFloat
7s
ease-in-out
infinite
alternate;
}
.hero-aranymetszes .am-orb-inner {
position: absolute;
left: 50%;
top: 50%;
width: 105px;
height: 105px;
transform:
translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(
circle at 35% 30%,
#fff4d2 0%,
#e0bd76 17%,
rgba(194, 145, 65, .35) 45%,
transparent 72%
);
box-shadow:
0 0 35px rgba(218, 177, 100, .25),
0 0 100px rgba(183, 132, 54, .13);
animation:
amOrbPulse
3.8s
ease-in-out
infinite
alternate;
}
.hero-aranymetszes .am-orb-ring {
position: absolute;
inset: -32px;
border:
1px solid
rgba(213, 170, 91, .11);
border-radius: 50%;
transform:
rotate(22deg)
scaleX(.65);
animation:
amRing
14s
linear
infinite;
}
@keyframes amOrbFloat {
from {
transform: translateY(12px);
}
to {
transform: translateY(-18px);
}
}
@keyframes amOrbPulse {
from {
transform:
translate(-50%, -50%)
scale(.88);
}
to {
transform:
translate(-50%, -50%)
scale(1.08);
}
}
@keyframes amRing {
to {
rotate: 360deg;
}
}
/* =========================
ALSÓ JELÖLÉS
========================= */
.hero-aranymetszes .am-number {
position: absolute;
z-index: 6;
left: 10%;
bottom: 6%;
display: flex;
align-items: center;
gap: 15px;
color:
rgba(247,238,225,.4);
font-family:
Arial,
sans-serif;
}
.hero-aranymetszes .am-number span {
color: #d4a75c;
font-size: 13px;
font-weight: 700;
}
.hero-aranymetszes .am-number i {
width: 40px;
height: 1px;
background:
rgba(212,167,92,.45);
}
.hero-aranymetszes .am-number small {
font-size: 9px;
letter-spacing: .22em;
}
/* =========================
TABLET
========================= */
@media (max-width: 900px) {
.hero-aranymetszes {
min-height: 700px;
clip-path:
polygon(
0 0,
100% 0,
100% 86%,
0 100%
);
}
.hero-aranymetszes .am-content {
margin-left: 7%;
padding-top: 15vh;
}
.hero-aranymetszes .am-orb {
width: 260px;
height: 260px;
right: -55px;
top: 39%;
opacity: .65;
}
.hero-aranymetszes .am-title {
font-size:
clamp(58px, 12.5vw, 100px);
}
.hero-aranymetszes .am-gold-line {
margin-left: 8%;
}
.hero-aranymetszes .am-last-line {
margin-left: 20%;
}
}
/* =========================
MOBIL
========================= */
@media (max-width: 600px) {
.hero-aranymetszes {
min-height: 650px;
clip-path:
polygon(
0 0,
100% 0,
100% 91%,
0 100%
);
}
.hero-aranymetszes .am-content {
width: 91%;
margin-left: 6%;
padding-top: 14vh;
}
.hero-aranymetszes .am-title {
font-size:
clamp(51px, 15.8vw, 76px);
line-height: .88;
}
.hero-aranymetszes .am-gold-line {
margin-left: 5%;
}
.hero-aranymetszes .am-last-line {
margin-left: 17%;
}
.hero-aranymetszes .am-text {
max-width: 310px;
font-size: 14px;
line-height: 1.65;
}
.hero-aranymetszes .am-orb {
width: 220px;
height: 220px;
right: -85px;
top: 50%;
opacity: .35;
}
.hero-aranymetszes .am-number {
left: 6%;
}
.hero-aranymetszes .am-number small {
display: none;
}
}
/* =========================
KEVESEBB MOZGÁS
========================= */
@media (prefers-reduced-motion: reduce) {
.hero-aranymetszes *,
.hero-aranymetszes *::before,
.hero-aranymetszes *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
(() => {
const hero = document.getElementById("heroAranymetszes");
if (!hero) return;
const typing = hero.querySelector(".am-typing");
const phrases = [
"Finom részletek",
"Meleg elegancia",
"Időtlen formák",
"Aranyló pillanatok"
];
let phraseIndex = 0;
let charIndex = 0;
let deleting = false;
function typeLoop() {
const phrase = phrases[phraseIndex];
if (!deleting) {
charIndex++;
typing.textContent =
phrase.slice(0, charIndex);
if (charIndex >= phrase.length) {
deleting = true;
setTimeout(typeLoop, 1900);
return;
}
setTimeout(typeLoop, 72);
} else {
charIndex--;
typing.textContent =
phrase.slice(0, charIndex);
if (charIndex <= 0) {
deleting = false;
phraseIndex =
(phraseIndex + 1) % phrases.length;
setTimeout(typeLoop, 450);
return;
}
setTimeout(typeLoop, 40);
}
}
typeLoop();
})();