/* ========================================================================== KF.Social "WOW" layer — gh-wow.css A purely ADDITIVE motion + showpiece stylesheet layered on top of golden.css. Loaded AFTER golden.css by the redesigned static pages (guides, help, security-center, about, press). Never edits a golden.css layout rule. Contract: - Everything is beautiful and fully readable with JS disabled. - JS (wow.js) only ADDS the `.wow-ready` class to and drives GSAP. Until then, reveal elements sit at their natural resting state so a no-JS / no-GSAP visitor sees the finished layout with zero hidden content. - All motion is gated behind (prefers-reduced-motion: no-preference) AND the `.wow-ready` flag, so reduced-motion users and no-JS users are safe. - Reserve space for every animated block: no layout shift, ever. ========================================================================== */ /* ----- Reveal primitives ------------------------------------------------- Resting (no-JS / reduced-motion) state = fully visible. Only when JS has confirmed motion is welcome do we arm the "from" state and let GSAP play. */ @media (prefers-reduced-motion: no-preference) { html.wow-ready [data-wow] { opacity: 0; will-change: transform, opacity; } html.wow-ready [data-wow="up"] { transform: translateY(26px); } html.wow-ready [data-wow="fade"] { transform: none; } html.wow-ready [data-wow="scale"]{ transform: scale(.965); } } /* Line-rise structural markup is always safe (no JS needed to read it). */ .wow-lines { display: block; } .wow-line { display: block; overflow: hidden; padding-bottom: .04em; } .wow-line-in { display: block; will-change: transform; } /* ----- Parallax hero media ----------------------------------------------- */ .wow-parallax { will-change: transform; } /* ----- 3D tilt cards ------------------------------------------------------ The perspective wrapper is set per-card in JS; here we only prep transforms. Desktop + fine-pointer only; touch devices keep the flat resting card. */ @media (hover: hover) and (pointer: fine) { .wow-tilt { transform-style: preserve-3d; transition: transform .16s var(--ease); will-change: transform; } .wow-tilt-media, .wow-tilt-lift { transition: transform .2s var(--ease); } } /* ----- Magnetic CTA ------------------------------------------------------- */ .wow-magnetic { will-change: transform; } /* ========================================================================= SHOWPIECE 1 — the layered "table scene" Plates, glasses and avatar chips floating in perspective layers. Pure CSS, parallaxed on scroll/pointer by wow.js (which sets --px / --py / --sc vars). ========================================================================= */ .table-scene { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; perspective: 1100px; --px: 0; --py: 0; } .table-scene-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(52deg) rotateZ(var(--rz, -18deg)); transition: transform .3s var(--ease); } /* The round table surface. */ .ts-table { position: absolute; left: 50%; top: 50%; width: 62%; aspect-ratio: 1; margin: -31% 0 0 -31%; border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, #fff8ec, #F1E3C6 60%, #E3CFA4); box-shadow: 0 40px 60px -30px rgba(23,19,12,.5), inset 0 0 0 1px rgba(255,255,255,.5); } .ts-layer { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; } /* Each plate / glass floats above the table on the Z axis. */ .ts-plate { display: block; position: absolute; width: 108px; height: 108px; margin: -54px 0 0 -54px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #ffffff, #F3ECDD 62%, #E7DAC1); box-shadow: 0 12px 22px -10px rgba(23,19,12,.5), inset 0 0 0 6px rgba(255,255,255,.7), inset 0 0 0 7px var(--line); transform: translate3d(var(--tx,0), var(--ty,0), var(--tz, 40px)) translate3d(calc(var(--px) * var(--pd, 1) * 1px), calc(var(--py) * var(--pd, 1) * 1px), 0); } .ts-plate::after { content: ""; position: absolute; inset: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--food-a, #E9A23B), var(--food-b, #C97C2C)); box-shadow: inset 0 2px 6px rgba(255,255,255,.4); } .ts-glass { display: block; position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(232,194,136,.75) 70%); box-shadow: 0 14px 20px -8px rgba(23,19,12,.45), inset 0 0 0 3px rgba(255,255,255,.6); transform: translate3d(var(--tx,0), var(--ty,0), var(--tz, 96px)) translate3d(calc(var(--px) * var(--pd, 1.6) * 1px), calc(var(--py) * var(--pd, 1.6) * 1px), 0); } /* Avatar chips: photographic dinner guests, floating highest. */ .ts-chip { display: block; position: absolute; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background-size: cover; background-position: center; border: 4px solid #fff; box-shadow: 0 20px 30px -12px rgba(23,19,12,.55); transform: rotateX(-52deg) translate3d(var(--tx,0), var(--ty,0), var(--tz, 150px)) translate3d(calc(var(--px) * var(--pd, 2.4) * 1px), calc(var(--py) * var(--pd, 2.4) * 1px), 0); } .ts-chip .ts-tick { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; display: flex; align-items: center; justify-content: center; } .ts-chip .ts-tick svg { width: 11px; height: 11px; color: #fff; } /* Soft gold glow behind the whole scene. */ .table-scene::before { content: ""; position: absolute; left: 50%; top: 54%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(201,138,59,.32), transparent 62%); filter: blur(6px); z-index: 0; } @media (max-width: 720px) { .table-scene { max-width: 340px; } .ts-plate { width: 76px; height: 76px; margin: -38px 0 0 -38px; } .ts-plate::after { inset: 18px; } .ts-chip { width: 46px; height: 46px; margin: -23px 0 0 -23px; } } /* ========================================================================= SHOWPIECE 2 — the rotating "verified coin" The blue verification tick as a slow-spinning 3D coin with a gold rim. Pure CSS animation; paused entirely under reduced-motion. ========================================================================= */ .coin-stage { perspective: 900px; display: flex; justify-content: center; padding: 1rem 0; } .coin { position: relative; width: 180px; height: 180px; transform-style: preserve-3d; animation: coin-spin 12s linear infinite; } /* A gentle constant X-tilt keeps the rim visible even at the 90deg edge. */ @keyframes coin-spin { from { transform: rotateX(-14deg) rotateY(0deg); } to { transform: rotateX(-14deg) rotateY(360deg); } } .coin-face { position: absolute; inset: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; background: radial-gradient(120% 120% at 32% 26%, #6d8bff, var(--blue) 58%, #2f4fd6); box-shadow: inset 0 0 0 7px var(--gold-soft), inset 0 0 0 9px var(--gold-deep), 0 30px 50px -22px rgba(23,19,12,.6); } .coin-face.back { transform: rotateY(180deg); } .coin-face svg { width: 82px; height: 82px; color: #fff; filter: drop-shadow(0 3px 4px rgba(13,10,7,.35)); } .coin-face.back .coin-mono { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 46px; color: #fff; opacity: .95; } /* The rim between the two faces, faked with a thin gold band. */ .coin-edge { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(-9px); background: linear-gradient(#8a5a1f, #E8C288 50%, #8a5a1f); box-shadow: 0 26px 44px -20px rgba(23,19,12,.7); } .coin-face { transform: translateZ(4px); } .coin-face.back { transform: rotateY(180deg) translateZ(4px); } @media (prefers-reduced-motion: reduce) { .coin { animation: none; transform: rotateY(-16deg); } } @media (max-width: 720px) { .coin { width: 128px; height: 128px; } .coin-face svg { width: 62px; height: 62px; } } /* ========================================================================= Gold particle drift (dark heroes). wow.js spawns .gold-dust dots into .gold-dust-field; each gets random --x/--dur/--delay. No dots without JS, and none under reduced-motion — the hero is complete without them. ========================================================================= */ .gold-dust-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .gold-dust { position: absolute; bottom: -12px; width: 4px; height: 4px; border-radius: 50%; background: radial-gradient(circle, var(--gold-soft), rgba(201,138,59,0) 70%); left: var(--x, 50%); opacity: 0; animation: dust-rise var(--dur, 9s) linear var(--delay, 0s) infinite; } @keyframes dust-rise { 0% { transform: translateY(0) scale(var(--s,1)); opacity: 0; } 12% { opacity: var(--o, .8); } 85% { opacity: var(--o, .8); } 100% { transform: translateY(calc(var(--rise, -420px))) translateX(var(--drift, 24px)) scale(var(--s,1)); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gold-dust { display: none; } } /* ========================================================================= Shared page furniture used by the redesigned templates (dark hero shell, section rhythm, editorial headers, tilt-card rails). All standalone classes — never collide with golden.css names. ========================================================================= */ /* Dark ink hero shell (security-center, about story band). */ .wow-dark { position: relative; overflow: hidden; background: radial-gradient(140% 120% at 12% 0%, #241a0d, var(--ink) 55%, var(--coffee-deep)); color: var(--cream); } .wow-dark .wow-eyebrow { color: var(--gold-soft); } .wow-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-deep); } /* Big editorial display headline. */ .wow-display { font-size: clamp(2.4rem, 6vw, 4.4rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.02; margin: 0; } .wow-display .serif { font-weight: 400; color: var(--gold); } .wow-dark .wow-display .serif { color: var(--gold-soft); } .wow-lede { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5; color: var(--body); max-width: 42ch; } .wow-dark .wow-lede { color: rgba(255,253,246,.82); } /* Section wrapper with generous vertical rhythm. */ .wow-sec { max-width: var(--w); margin: 0 auto; padding: clamp(3.5rem, 8vw, 6rem) 28px; } .wow-sec-tight { padding-top: clamp(2rem,5vw,3rem); padding-bottom: clamp(2rem,5vw,3rem); } .wow-sec-head { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 650; letter-spacing: -.028em; line-height: 1.1; margin: 0 0 .6rem; } .wow-sec-dek { font-size: 1.08rem; color: var(--body); max-width: 46ch; margin: 0 0 2rem; line-height: 1.6; } /* Photographic tilt card (guides featured + rails). */ .wow-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-card); text-decoration: none; color: var(--ink); transition: box-shadow .25s var(--ease), border-color .25s var(--ease); } @media (hover:hover){ .wow-card:hover { box-shadow: var(--shadow-shot); border-color: var(--gold-soft); } } .wow-card-media { display: block; position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--cream-2); } .wow-card-media::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(13,10,7,.5), rgba(13,10,7,0) 55%); } .wow-card-kicker { position:absolute; top:14px; left:14px; z-index:2; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#fff; background: color-mix(in srgb, var(--cat-color, var(--gold-deep)) 82%, transparent); padding:.28rem .6rem; border-radius:999px; backdrop-filter: blur(4px); } .wow-card-body { display: block; padding: 1.15rem 1.3rem 1.4rem; } .wow-card-title { display: block; font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.32; color: var(--ink); margin: 0 0 .4rem; } .wow-card:hover .wow-card-title { color: var(--gold-deep); } .wow-card-desc { display: block; font-size: .9rem; line-height: 1.6; color: var(--body); margin: 0; } /* Big featured tilt card (guides cover). */ .wow-feature { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 22rem; } .wow-feature .wow-card-media { aspect-ratio: auto; height: 100%; min-height: 20rem; } .wow-feature-body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; gap: .9rem; } .wow-feature-title { display: block; font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 650; letter-spacing: -.028em; line-height: 1.12; color: var(--ink); margin: 0; } .wow-feature-desc { display: block; font-size: 1.05rem; line-height: 1.6; color: var(--body); margin: 0; } @media (max-width: 760px){ .wow-feature { grid-template-columns: 1fr; } .wow-feature .wow-card-media { min-height: 14rem; } } /* Horizontal card rail (category shelves). */ .wow-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; } .wow-rail > * { scroll-snap-align: start; } .wow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } @media (max-width: 900px){ .wow-grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 600px){ .wow-grid { grid-template-columns: 1fr; } } /* Shelf header row. */ .wow-shelf-head { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin: 2.2rem 0 1rem; } .wow-shelf-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0; color: var(--ink); } .wow-shelf-title .dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background: var(--cat-color, var(--gold)); margin-right:.55rem; vertical-align: middle; } .wow-shelf-more { font-size: .85rem; font-weight: 650; color: var(--gold-deep); white-space: nowrap; } .wow-shelf-more:hover { color: var(--ink); } /* Pillars (security-center). */ .wow-pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; } @media (max-width: 820px){ .wow-pillars { grid-template-columns: 1fr; } } .wow-pillar { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 1.8rem 1.7rem; box-shadow: var(--shadow-card); } .wow-pillar-ic { width: 3rem; height: 3rem; border-radius: 14px; display:flex; align-items:center; justify-content:center; background: rgba(201,138,59,.12); color: var(--gold-deep); margin-bottom: 1.1rem; } .wow-pillar-ic svg { width: 1.55rem; height: 1.55rem; } .wow-pillar h3 { font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; margin: 0 0 .5rem; color: var(--ink); } .wow-pillar p { font-size: .96rem; line-height: 1.62; color: var(--body); margin: 0; } /* Values row (about). */ .wow-values { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.6rem 2rem; } @media (max-width: 820px){ .wow-values { grid-template-columns: 1fr; } } .wow-value h3 { font-size: 1.15rem; font-weight: 650; letter-spacing: -.015em; margin: 0 0 .45rem; color: var(--ink); display:flex; align-items:center; gap:.6rem; } .wow-value h3 .n { font-family:'Fraunces',Georgia,serif; font-style:italic; color: var(--gold); font-size: 1.25rem; } .wow-value p { font-size: .98rem; line-height: 1.64; color: var(--body); margin: 0; } /* Photo band with parallax (about). */ .wow-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .wow-band-cell { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream-2); } .wow-band-cell img { width: 100%; height: 118%; object-fit: cover; } @media (max-width: 760px){ .wow-band { grid-template-columns: repeat(2,1fr); } } /* Fact cards (press / about honest facts). */ .wow-facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.1rem; } @media (max-width: 820px){ .wow-facts { grid-template-columns: 1fr; } } .wow-fact { background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 1.35rem 1.5rem; box-shadow: var(--shadow-card); } .wow-fact dt { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 .4rem; } .wow-fact dd { font-size: 1.02rem; line-height: 1.55; color: var(--ink); margin: 0; font-weight: 500; } /* Colour swatches (press). */ .wow-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .9rem; } .wow-swatch { border:1px solid var(--line); border-radius: var(--r-md); overflow:hidden; background:#fff; box-shadow: var(--shadow-card); cursor: pointer; text-align:left; font: inherit; color: inherit; padding:0; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .wow-swatch:hover { transform: translateY(-2px); box-shadow: var(--shadow-shot); } .wow-swatch-chip { display: block; height: 5rem; } .wow-swatch-meta { padding: .7rem .85rem .8rem; } .wow-swatch-name { font-size: .9rem; font-weight: 650; color: var(--ink); } .wow-swatch-hex { font-size: .8rem; color: var(--body); font-variant-numeric: tabular-nums; display:flex; align-items:center; gap:.4rem; } .wow-swatch-hex .copied { color: var(--green); font-weight: 700; } /* Asset download grid (press). */ .wow-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; } .wow-asset { display:flex; flex-direction:column; align-items:flex-start; gap:.7rem; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem 1.3rem; box-shadow: var(--shadow-card); text-decoration:none; color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .wow-asset:hover { transform: translateY(-2px); box-shadow: var(--shadow-shot); border-color: var(--gold-soft); } .wow-asset-ic { width:2.4rem; height:2.4rem; border-radius:12px; background: rgba(201,138,59,.12); color: var(--gold-deep); display:flex; align-items:center; justify-content:center; } .wow-asset-ic svg { width: 1.3rem; height: 1.3rem; } .wow-asset-t { font-size:.95rem; font-weight:650; } .wow-asset-s { font-size:.8rem; color: var(--faint); } /* Anchor chip row (help home). */ .wow-chips { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; } .wow-chip { display:inline-flex; align-items:center; gap:.45rem; padding:.55rem 1.05rem; border-radius:999px; font-size:.9rem; font-weight:600; background:#fff; border:1px solid var(--line); color:var(--body); box-shadow: var(--shadow-card); text-decoration:none; transition: transform .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease); } .wow-chip:hover { transform: translateY(-2px); border-color: var(--gold-soft); color: var(--ink); } .wow-chip svg { width:1rem; height:1rem; color: var(--gold-deep); } /* Numbered step cards (help article). */ .wow-steps { counter-reset: step; display:flex; flex-direction:column; gap:1rem; margin: 1.75rem 0; } .wow-step { position:relative; background:#fff; border:1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem 1.5rem 1.3rem 4.2rem; box-shadow: var(--shadow-card); } .wow-step::before { counter-increment: step; content: counter(step); position:absolute; left:1.2rem; top:1.15rem; width:2rem; height:2rem; border-radius:50%; background: var(--ink); color: var(--cream); font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; } .wow-step h3 { font-size:1.05rem; font-weight:650; margin:0 0 .35rem; color:var(--ink); } .wow-step p { font-size:.96rem; line-height:1.6; color:var(--body); margin:0; } /* Tip / note callout. */ .wow-callout { display:flex; gap:.9rem; background: var(--cream-2); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius: 0 var(--r-md) var(--r-md) 0; padding:1.1rem 1.3rem; margin:1.5rem 0; } .wow-callout svg { width:1.3rem; height:1.3rem; color: var(--gold-deep); flex:none; margin-top:.1rem; } .wow-callout p { margin:0; font-size:.98rem; line-height:1.6; color:var(--ink); } /* Prev / next nav (help article). */ .wow-prevnext { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin: 2.5rem 0 0; } @media (max-width: 600px){ .wow-prevnext { grid-template-columns: 1fr; } } .wow-pn { border:1px solid var(--line); border-radius: var(--r-md); padding:1rem 1.2rem; background:#fff; text-decoration:none; box-shadow: var(--shadow-card); transition: border-color .18s var(--ease), transform .18s var(--ease); } .wow-pn:hover { border-color: var(--gold-soft); transform: translateY(-2px); } .wow-pn-l { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-deep); } .wow-pn.next { text-align:right; } .wow-pn-t { font-size:1rem; font-weight:600; color: var(--ink); margin-top:.25rem; } /* CTA slab (shared conversion footer used across the redesigned pages). */ .wow-slab { position: relative; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--shadow-shot); isolation: isolate; } .wow-slab-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; transform: scale(1.03); } .wow-slab-scrim { position:absolute; inset:0; z-index:1; background: linear-gradient(105deg, rgba(13,10,7,.94) 28%, rgba(13,10,7,.72) 64%, rgba(13,10,7,.55)); } .wow-slab-in { position:relative; z-index:2; padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.8rem,4vw,3rem); color: var(--cream); max-width: 40rem; } .wow-slab-in h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); font-weight: 650; letter-spacing: -.028em; line-height: 1.1; margin: 0 0 .7rem; color: var(--cream); } .wow-slab-in p { font-size: 1.08rem; line-height: 1.55; color: rgba(255,253,246,.85); margin: 0 0 1.4rem; } .wow-slab-actions { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }