/* Genesis Works, Fora clone: foundation tokens measured on fora.so (desktop 1440). Section files own their own layout. */ :root{ --bg:#000; --ink:rgb(255,243,240); /* headings, prices, strong text */ --ink-80:rgba(255,255,255,.8); /* body text */ --ink-65:rgba(255,255,255,.65); /* muted text, second headline line */ --ink-25:rgba(255,255,255,.25); /* hairlines, dots */ --ink-10:rgba(255,255,255,.1); /* borders */ --ink-05:rgba(255,255,255,.05); --panel:rgba(15,15,15,.85); /* card surfaces */ --panel-2:rgba(23,23,23,.85); --panel-3:rgba(0,0,0,.85); --white:#fff; --shadow:rgba(0,0,0,.35) 0 1px 32px 0; --font:Inter,"Inter Placeholder",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-display:"Inter Display","Inter Display Placeholder",Inter,system-ui,sans-serif; --ease-link:cubic-bezier(.44,0,.56,1); --container:1080px; --container-md:720px; /* the fixed column fora.so uses from 768 to 1023.98 */ --gutter:180px; --radius:16px; --radius-pill:100px; } *,*::before,*::after{box-sizing:border-box} html{background:var(--bg);-webkit-text-size-adjust:100%} body{margin:0;background:transparent;color:var(--ink-80);font-family:var(--font);font-size:14px;line-height:21px;letter-spacing:-.28px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} h1,h2,h3,h4,p,ul,ol,figure{margin:0} ul,ol{padding:0;list-style:none} a{color:inherit;text-decoration:none;transition:color .4s var(--ease-link)} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} img,svg,video{display:block;max-width:100%} /* The column every section uses. Measured on fora.so with a 17-width breakpoint probe (docs/research/fora/pricing-responsive.json): >=1280 a fixed 1080 centred (x 180 at 1440); 768 to 1023.98 a fixed 720 centred; below 768 full width with 24px sides. */ .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:0} @media (max-width:1023.98px){.container{max-width:var(--container-md)}} @media (max-width:767.98px){.container{max-width:none;padding-inline:24px}} /* type scale, measured */ .t-h1{font-family:var(--font);font-size:56px;line-height:72.8px;letter-spacing:-2.24px;font-weight:400;color:var(--ink)} .t-h2{font-size:40px;line-height:54px;letter-spacing:-1.6px;font-weight:500;color:var(--white)} .t-h2 .soft{color:var(--ink-65)} .t-h3{font-size:28px;line-height:37.8px;letter-spacing:-.84px;font-weight:500;color:var(--ink)} .t-lead{font-size:22px;line-height:33px;letter-spacing:-.44px;font-weight:400;color:var(--ink)} .t-display{font-family:var(--font-display);font-size:36px;line-height:48.6px;letter-spacing:-.72px;font-weight:400;color:var(--ink)} .t-body{font-size:16px;line-height:24px;letter-spacing:-.16px;color:var(--ink-80)} .t-small{font-size:12px;line-height:18px;letter-spacing:-.24px;color:var(--ink-65)} /* accessibility */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--white);outline-offset:3px} @media (prefers-reduced-motion:reduce){[data-appear]{opacity:1!important;transform:none!important;transition:none!important}} /* ---- portfolio shots ------------------------------------------------------- Every mockup slot on this page holds a 1024x538 capture of a Genesis site. Fora's own mockups were authored to each slot's shape; ours are one fixed landscape shot, so a slot taller than 1.9:1 cannot use `cover` without cropping sideways and cutting headlines mid-word (seen at 768 on the step cards). House rule: the shot fits the slot width and anchors to the top, exactly as a real page would sit in a browser window, and the slot is painted with that shot's own bottom-edge colour so the space beneath reads as the page continuing past the fold. Edge colours are sampled from the bottom 24px of each file. */ .gf-shot{position:relative;overflow:hidden;background:var(--shot,#0b0b0b)} .gf-shot img{display:block;width:100%;height:auto;max-width:none;object-fit:fill;object-position:50% 0} [data-shot="aeren"]{--shot:#c5c2b9} [data-shot="aurelle"]{--shot:#f0ebe5} [data-shot="manskin"]{--shot:#d6d7c7} [data-shot="pizza-makers"]{--shot:#d57f74} [data-shot="zesta"]{--shot:#e4aeaa} [data-shot="serti"]{--shot:#ebe7dc} [data-shot="nido"]{--shot:#f4dbdc} [data-shot="petalwood"]{--shot:#c2b6ab} [data-shot="aurelis"]{--shot:#5c4c3b} [data-shot="nymphai"]{--shot:#695640} [data-shot="orris"]{--shot:#6a6553} /* ================================================================ the sky One layer for the whole page, fixed at z-index -1 so it paints above the page black (which lives on html, not body: a negative z-index child paints *under* the body background) and below every section's content. One element rather than one per section, so the light never resets at a boundary. Everything it draws is on .gf-sky-field: four sheets of light and a star tile, as background layers on a single element. That is one texture and one animation instead of five of each, which is what makes it cheap enough to leave on permanently. The hero covers it with its own gradient, so it is never faded in; it is rasterised once at load and only fades out as the contact section arrives. .gf-sky-move takes the scroll parallax from app.js. Both stop under prefers-reduced-motion. */ .gf-sky{ position:fixed; inset:-14% -6%; z-index:-1; pointer-events:none; contain:strict; } .gf-sky-move{position:absolute;inset:0;will-change:transform} .gf-sky-field{ position:absolute;inset:0; background-image: radial-gradient(closest-side,rgba(122,152,204,.075),rgba(122,152,204,.026) 55%,transparent 100%), radial-gradient(closest-side,rgba(206,172,132,.04),rgba(206,172,132,.014) 55%,transparent 100%), radial-gradient(closest-side,rgba(96,116,190,.068),rgba(96,116,190,.023) 55%,transparent 100%), radial-gradient(closest-side,rgba(104,126,196,.064),rgba(104,126,196,.022) 55%,transparent 100%), radial-gradient(circle 1px at 45.24% 55.98%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 45.18% 85.5%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 18.47% 51.19%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 9.41% 30.34%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 53.87% 89.04%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 59.54% 39.62%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 65.39% 61.56%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 62.31% 83.17%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 5.96% 19.02%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 59.96% 77.81%,rgba(214,226,246,0.22) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 44.05% 84.24%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 64.03% 49.98%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 45.73% 27.82%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 70.78% 31.53%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 51.29% 2.98%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 40.04% 84.66%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 6.68% 1.69%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 21.35% 92.7%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 47.0% 98.04%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 41.98% 56.62%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 77.85% 26.98%,rgba(214,226,246,0.12) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 31.12% 1.51%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 75.8% 11.8%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 70.7% 1.1%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 79.7% 17.77%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 44.74% 19.07%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 41.92% 38.38%,rgba(214,226,246,0.3) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 42.08% 21.29%,rgba(214,226,246,0.22) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 86.43% 97.49%,rgba(214,226,246,0.22) 0%,rgba(214,226,246,0) 100%), radial-gradient(circle 1px at 99.79% 1.96%,rgba(214,226,246,0.16) 0%,rgba(214,226,246,0) 100%); background-size:1180px 820px,1300px 880px,1220px 840px,1260px 860px,620px 520px; background-position:-4% 6%,104% 26%,-2% 82%,103% 100%,0 0; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat; animation:gf-sky-drift 76s cubic-bezier(.42,0,.58,1) infinite alternate; will-change:transform; } @keyframes gf-sky-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-90px,46px,0)}} @media (prefers-reduced-motion:reduce){ .gf-sky-field{animation:none} .gf-sky-move{transform:none} } /* ---------------------------------------------------------------- skip link Bypass Blocks (WCAG 2.4.1): every page starts with a link that jumps a keyboard past the bar straight to
. It is off-screen until focused, and it is moved with a TRANSFORM rather than inset-inline-start:-9999px, because a -9999px offset in an RTL document is 9999px of page to the right of the viewport: a horizontal scroll gutter on every Arabic page. */ .gf-skip{ position:absolute; inset-inline-start:0; top:0; z-index:100; transform:translateY(-140%); padding:10px 16px; border-radius:0 0 var(--radius,10px) 0; background:var(--white,#fff); color:#000; font-size:14px; text-decoration:none; } .gf-skip:focus{transform:none} /* ---------------------------------------------------------------- focus One ring for everything focusable. Components tint their own label on :focus-visible, which is easy to lose on a dark ground; an outline cannot be missed and, unlike a border, never moves the layout. :where() keeps the specificity at zero so any component can still override it. */ :where(a,button,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{ outline:2px solid var(--white,#fff); outline-offset:3px; }