/* mi-terkep.com homepage: split stage (scroll-craft build, 2026-10-14). Loaded after /assets/scrollcraft.css (the unmodified engine). Everything here is scoped to body:is(.split-home,.split-page), so no other page changes. Grammar: paper on the left is the web page as it is ("Előtte"), ink on the right is the AI answer surface ("Utána"). One hand-drawn seam is held for the whole page and resolves at the close, when ink takes the frame and the footer continues in ink. Design reference: the site's own system (Inter, #2563eb, #1a1a2e and its dark-theme tokens), with stripe-DESIGN.md (frontend-design-references) for the white canvas beside deep indigo, the 4-8px radius scale and the blue-tinted multi-layer shadow on paper objects. */ /* ------------------------------------------------------------ the scroller -- The engine reads window scroll. Every other page scrolls inside .page (site.css); the homepage hands scrolling back to the window. The header is not sticky here: the seam is the chrome, and a sticky bar would cover the top of every pinned stage. */ html:has(body:is(.split-home,.split-page)){height:auto;scroll-behavior:auto} body:is(.split-home,.split-page){height:auto;overflow:visible;display:block;overflow-x:clip} body:is(.split-home,.split-page) .page{overflow:visible;display:block;min-height:0;scroll-behavior:auto} body:is(.split-home,.split-page) .site-header{position:relative} /* ------------------------------------------------------------------ tokens -- */ body:is(.split-home,.split-page){ --paper:#ffffff; --paper-card:#ffffff; --paper-text:#1a1a2e; /* 17.1:1 on paper */ --paper-soft:#5a6178; /* 6.15:1 */ --paper-accent:#2563eb; --paper-accent-ink:#ffffff; /* 5.17:1 */ --paper-accent-hover:#1e40af; --ink-ground:#1a1a2e; --ink-surface:#252542; --ink-text:#e8eaf2; /* 14.2:1 on ink */ --ink-soft:#b8bdcc; /* 9.1:1 */ --ink-accent:#60a5fa; --ink-accent-ink:#0b1220; /* 7.0:1 on ink */ --ink-accent-hover:#93c5fd; --hair-paper:#e3e7ef; --hair-ink:rgba(232,234,242,.16); --shadow-paper:0 2px 5px -1px rgba(50,50,93,.18),0 13px 27px -5px rgba(50,50,93,.22); --shadow-slip:0 6px 12px -2px rgba(50,50,93,.30),0 30px 60px -12px rgba(50,50,93,.42); --shadow-ink:0 2px 6px -1px rgba(4,6,20,.45),0 16px 32px -8px rgba(4,6,20,.55); --draw-paper:opacity(1); /* ink line drawings on paper: as drawn (an identity filter, so it composes) */ --draw-ink:invert(1) hue-rotate(180deg); /* the site's own dark treatment for drawings */ --gut:clamp(1.25rem,4.5vw,4.5rem); --t-display:clamp(2rem,0.9rem + 2.4vw,2.9rem); --t-h2:clamp(1.6rem,1.1rem + 1.2vw,2.15rem); --t-body:clamp(1.0625rem,1rem + .2vw,1.1875rem); --t-quote:clamp(1rem,.9rem + .45vw,1.1875rem); --r-s:6px; --r-m:12px; /* the engine's six roles follow the paper side */ --sc-canvas:var(--paper); --sc-surface:var(--paper-card); --sc-ink:var(--paper-text); --sc-ink-soft:var(--paper-soft); --sc-accent:var(--paper-accent); --sc-accent-ink:var(--paper-accent-ink); --sc-font-display:'Inter',-apple-system,'Segoe UI',sans-serif; --sc-font-text:'Inter',-apple-system,'Segoe UI',sans-serif; } /* dark theme: the split survives as two darks, paper the lighter one */ html[data-theme="dark"] body:is(.split-home,.split-page){ --paper:#1b2131; --paper-card:#232a3c; --paper-text:#e8eaf2; /* 12.6:1 on paper */ --paper-soft:#a9aebc; /* 6.8:1 */ --paper-accent:#60a5fa; --paper-accent-ink:#0b1220; --paper-accent-hover:#93c5fd; --ink-ground:#0b0e14; --ink-surface:#151a26; --ink-soft:#a9aebc; /* 8.6:1 */ --hair-paper:#2c3447; --shadow-paper:0 2px 5px -1px rgba(0,0,0,.4),0 13px 27px -5px rgba(0,0,0,.45); --shadow-slip:0 6px 12px -2px rgba(0,0,0,.5),0 30px 60px -12px rgba(0,0,0,.6); --draw-paper:invert(1) hue-rotate(180deg); } body:is(.split-home,.split-page){background:var(--paper);color:var(--paper-text); font-family:var(--sc-font-text);font-size:1.0625rem;line-height:1.65;letter-spacing:normal} /* site.css boxes every child of
at 1140px; the stage owns the full width here */ :is(.split-home,.split-page) main{position:relative;overflow-x:clip} :is(.split-home,.split-page) main>*{max-width:none;margin-inline:0;padding-inline:0} :is(.split-home,.split-page) main>section:not(.split){padding-block:0} :is(.split-home,.split-page) main>section.sh-act{position:relative;z-index:1} :is(.split-home,.split-page) .site-footer{margin-top:0} /* --------------------------------------------------------- ground and seam -- */ :is(.split-home,.split-page) .ground{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; overflow:visible;padding:0} :is(.split-home,.split-page) .ground path{fill:var(--ink-ground)} .seam-chrome{position:fixed;inset:0;pointer-events:none;z-index:60;padding:0} .seam-label{position:absolute;top:22px;font:600 .8125rem/1.2 var(--sc-font-text);letter-spacing:.01em; opacity:var(--chrome,0);transition:opacity 220ms var(--sc-ease-out)} .seam-label--before{right:calc(50% + 16px);color:var(--paper-soft)} .seam-label--after{left:calc(50% + 16px);color:var(--ink-soft)} .seam-mark{position:absolute;left:50%;top:0;width:44px;height:44px;margin-left:-22px;translate:0 90px; opacity:var(--mark,1)} html[data-theme="dark"] .seam-mark{filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(1.05)} /* ------------------------------------------------------------ split layout -- Never set `position` on a stage (`.split` is the stage inside pinned acts): it would beat the engine's sticky .sc-stage and the act would silently stop pinning. Flow sections are
, so only those get position:relative. */ .split{display:grid;grid-template-columns:1fr 1fr} .side{position:relative;padding-inline:var(--gut);min-width:0} .side--paper{color:var(--paper-text)} .side--ink{color:var(--ink-text)} .side-body{position:relative;z-index:2;max-width:36rem} .seam-h{display:none} /* ------------------------------------------------------------------- type -- */ /* The resets carry element weight only (:where), so they beat site.css's bare h1/p/a rules by load order and lose to every component rule below. */ :where(:is(.split-home,.split-page) main) :is(h1,h2,h3),.side-head,.you-line{font-family:var(--sc-font-display); margin:0;text-wrap:balance;color:inherit} :where(:is(.split-home,.split-page) main) h1,.side-head{font-size:var(--t-display);font-weight:800;line-height:1.05;letter-spacing:-.032em} .side--ink h1{letter-spacing:-.028em;line-height:1.08} :where(:is(.split-home,.split-page) main) h2{font-size:var(--t-h2);font-weight:800;line-height:1.12;letter-spacing:-.026em} :where(:is(.split-home,.split-page) main) h3{font-size:1.125rem;font-weight:700;line-height:1.3;letter-spacing:-.01em} :where(:is(.split-home,.split-page) main) p{margin:0} :where(:is(.split-home,.split-page) main) :is(ul,ol){margin:0;padding:0;list-style:none} .sh-stack>*+*{margin-top:1rem} .sh-stack>h2+*{margin-top:1.1rem} .sh-lede{font-size:var(--t-body);line-height:1.62;color:var(--paper-soft);text-wrap:pretty} .side--ink .sh-lede,.sh-lede--ink{color:var(--ink-soft)} .sh-note{font-size:.9375rem;line-height:1.55;color:var(--paper-soft)} .side--ink .sh-note,.sh-note--ink{color:var(--ink-soft)} .sh-eyebrow,.sh-kicker{font:600 .9375rem/1.35 var(--sc-font-text);letter-spacing:0;color:var(--paper-soft)} .side--ink .sh-eyebrow{color:var(--ink-soft)} .sh-kicker{color:var(--paper-accent)} :where(:is(.split-home,.split-page) main) a{color:inherit} /* ------------------------------------------------- controls (6px, never a pill) */ .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;border-radius:var(--r-s); padding:.85rem 1.3rem;font:600 1rem/1.2 var(--sc-font-text);text-decoration:none;white-space:nowrap; background:var(--paper-accent);color:var(--paper-accent-ink)!important;border:1.5px solid transparent; transition:background-color 160ms var(--sc-ease-out),border-color 160ms var(--sc-ease-out),transform 120ms var(--sc-ease-out)} .sh-btn:hover{text-decoration:none} .sh-btn--ink{background:var(--ink-accent);color:var(--ink-accent-ink)!important} .sh-btn--ghost{background:transparent;color:var(--paper-accent)!important;border-color:var(--paper-accent)} .sh-btn--ghost-ink{background:transparent;color:var(--ink-text)!important;border-color:rgba(232,234,242,.42)} .sh-btn--lg{padding:1rem 1.6rem;font-size:1.0625rem} @media (hover:hover) and (pointer:fine){ .sh-btn:hover{background:var(--paper-accent-hover)} .sh-btn--ink:hover{background:var(--ink-accent-hover)} .sh-btn--ghost:hover{background:rgba(37,99,235,.07)} .sh-btn--ghost-ink:hover{background:rgba(232,234,242,.08);border-color:var(--ink-text)} } .sh-btn:active{transform:translateY(1px)} .sh-link{color:var(--paper-accent)!important;font-weight:600;text-decoration:underline; text-decoration-thickness:1px;text-underline-offset:.22em} .sh-link--ink{color:var(--ink-accent)!important} .side--ink :focus-visible,.closer :focus-visible{outline-color:var(--ink-accent)} .sh-ctas{display:flex;flex-wrap:wrap;gap:.75rem} /* ------------------------------------------------------------- 0 · hero --- */ .sh-hero{height:100vh;height:100svh} .sh-hero .side{display:flex;flex-direction:column;overflow:clip} .sh-hero .side-body{padding-top:clamp(2.75rem,9vh,6.5rem);display:flex;flex-direction:column} .sh-hero .side-head{max-width:11em} .sh-hero h1{max-width:14em;margin-top:.9rem} .hero-lede{margin-top:1.1rem!important;max-width:30em;font-size:var(--t-body);line-height:1.58;color:var(--ink-soft)} .sh-hero .sh-ctas{margin-top:1.6rem} .plane{margin:0} .plane img{display:block;width:100%;height:auto;max-width:none} .plane--far{position:absolute;z-index:0;width:min(46rem,120%);left:-18%;top:12%;pointer-events:none} .side--ink .plane--far{left:auto;right:-26%;top:30%} .contour{width:100%;height:auto;fill:none;stroke:rgba(37,99,235,.09);stroke-width:1.3} .contour--ink{stroke:rgba(147,197,253,.10)} .plane--list{width:min(22rem,70%,calc((100svh - 21rem) * 1.14));margin-top:clamp(1.6rem,4vh,3rem);margin-left:-.6rem; transform-origin:40% 40%;scale:calc(1 - var(--sc-p,0) * .12);opacity:calc(1 - var(--sc-p,0) * .5)} .plane--list img{filter:var(--draw-paper)} .answer-wrap{position:relative;width:min(19rem,58%,calc((100svh - 30rem) * 1.31));margin-top:clamp(1.25rem,3.5vh,2.5rem)} .plane--answer{transform-origin:50% 90%;scale:calc(1 + var(--sc-p,0) * .07)} .side--ink .plane img,.side--ink .sh-art img,.side--ink .age-art img{filter:var(--draw-ink)} .side--paper .sh-art img,.side--paper .age-art img{filter:var(--draw-paper)} .sparkle{position:absolute;z-index:3;width:18%;height:auto;right:-7%;top:-14%;max-width:none} /* ------------------------------------------------------- 1 · két játszma --- */ .duel{grid-template-areas:"a b" "ca cb";padding-block:clamp(3rem,7vh,4.75rem)} .duel-a{grid-area:a} .duel-b{grid-area:b} .cross--a{grid-area:ca} .cross--b{grid-area:cb} .duel-stack{max-width:31rem} .duel p{font-size:var(--t-body);line-height:1.62} .duel .side--paper p{color:var(--paper-soft)} .duel .side--ink p{color:var(--ink-soft)} .duel .duel-punch{font-size:clamp(1.3rem,1rem + .9vw,1.75rem);font-weight:800;line-height:1.2;letter-spacing:-.022em; color:var(--ink-text)!important;text-wrap:balance} .duel .duel-punch--paper{color:var(--paper-text)!important} .cross{font-family:var(--sc-font-display);font-weight:800;font-size:clamp(1.9rem,1.1rem + 2.2vw,3rem)!important; letter-spacing:-.03em;line-height:1.1!important;padding-top:clamp(2rem,5vh,3.25rem)} .cross--a{text-align:right;padding-right:.32em;color:var(--paper-text)!important} .cross--b{padding-left:.32em;color:var(--ink-text)!important} .cross--a b{color:var(--paper-accent);font-weight:800} .cross--b b{color:var(--ink-accent);font-weight:800} /* ------------------------------------------------ 1 · the two games, story --- Pinned. Page JS writes --s on each struck row (4 to 10) and --dim, --win, --out, --ans, --late on the stage; every fallback is the resolved state, so no JS, reduced motion and the flow version all show the outcome. Struck rows stay readable. */ .duel2{height:100vh;height:100svh} .duel2 .side-body{padding-top:clamp(2.25rem,8vh,5rem);max-width:36rem} .duel-sub{margin-top:.55rem!important;font-size:1rem;line-height:1.55;max-width:32rem} .side--paper .duel-sub{color:var(--paper-soft)} .side--ink .duel-sub{color:var(--ink-soft)} .serp{margin-top:1.1rem!important;max-width:34rem;background:var(--paper-card);border:1px solid var(--hair-paper); border-radius:var(--r-m);box-shadow:var(--shadow-paper);padding:.85rem .9rem .9rem} .serp-q{display:flex;align-items:center;gap:.6rem;border:1px solid var(--hair-paper);border-radius:var(--r-s); padding:.45rem .7rem;font-size:.9375rem;font-weight:500;color:var(--paper-text);margin-bottom:.45rem!important} .serp-ico{position:relative;flex:none;width:.75rem;height:.75rem;border:2px solid var(--paper-soft);border-radius:50%} .serp-ico::after{content:"";position:absolute;right:-.32rem;bottom:-.36rem;width:2px;height:.42rem; background:var(--paper-soft);rotate:-45deg} .serp-list{counter-reset:r;display:grid;gap:.05rem} .serp-list li{position:relative;display:flex;align-items:baseline;gap:.55rem;padding:.3rem .45rem;border-radius:4px; counter-increment:r;font-size:.9375rem;line-height:1.3} .serp-list li::before{content:counter(r) ".";flex:none;width:1.6em;text-align:right;font-weight:700;color:var(--paper-soft); font-variant-numeric:tabular-nums} .serp-list b{font-weight:600;color:var(--paper-accent)} .serp-list span{margin-left:auto;padding-left:.6rem;font-size:.8125rem;color:var(--paper-soft);white-space:nowrap} .serp-list li:nth-child(n+4){opacity:calc(1 - var(--s,1) * .6);translate:calc(var(--s,1) * -6px) 0} .serp-list li:nth-child(n+4)::after{content:"";position:absolute;left:2.4em;right:.45rem;top:52%;height:2px;border-radius:2px; background:var(--paper-text);transform-origin:0 50%;scale:var(--s,1) 1;rotate:-.7deg} .serp-list li:nth-child(-n+2){opacity:calc(1 - var(--dim,1) * .42)} .serp-win{background:rgba(37,99,235,calc(var(--win,1) * .09));box-shadow:inset 0 0 0 calc(var(--win,1) * 1.5px) var(--paper-accent)} html[data-theme="dark"] .serp-win{background:rgba(96,165,250,calc(var(--win,1) * .14))} .serp-out{margin-top:.55rem!important;font-size:.875rem;font-weight:600;color:var(--paper-text);opacity:var(--out,1)} .duel-answer{margin-top:.9rem} .ans-body{display:grid} .ans-body>*{grid-area:1/1} .typing{display:flex;gap:.3rem;align-items:center;height:1.6em;opacity:calc(1 - var(--ans,1))} .typing span{width:.45rem;height:.45rem;border-radius:50%;background:var(--ink-soft);animation:sh-typing 1.2s infinite ease-in-out} .typing span:nth-child(2){animation-delay:.15s} .typing span:nth-child(3){animation-delay:.3s} @keyframes sh-typing{0%,80%,100%{opacity:.25;translate:0 0}40%{opacity:1;translate:0 -3px}} @media (prefers-reduced-motion:reduce){.typing span{animation:none}} .answer .duel-ans{opacity:var(--ans,1);color:var(--ink-text)} .duel-ans .cite{color:var(--ink-accent)} .duel2 .duel-punch--late{margin-top:1.4rem!important;opacity:var(--late,1);font:800 clamp(1.3rem,1rem + .9vw,1.75rem)/1.2 var(--sc-font-display); letter-spacing:-.022em;color:var(--ink-text);text-wrap:balance;max-width:24em} /* the naming row after the story */ .duel-name{grid-template-areas:"ca cb" "a b";padding-block:clamp(2rem,5vh,3.25rem) clamp(2.5rem,6vh,4rem)} .duel-name .cross{padding-top:0} .duel-name .duel-a,.duel-name .duel-b{padding-top:1.4rem} .duel-name .duel-b .sh-stack{max-width:31rem} /* ---------------------------------------------------------- 2 · crossing --- */ .peak{height:100vh;height:100svh} .peak .side-body{padding-top:clamp(3rem,10vh,6rem)} @media (min-width:761px){.peak{--t-quote:clamp(1.0625rem,.7rem + .85vw,1.375rem)}} .source{background:var(--paper-card);border:1px solid var(--hair-paper);border-radius:var(--r-m); box-shadow:var(--shadow-paper);padding:1.5rem 1.6rem 1.6rem;max-width:38rem} .source-label{font:600 .875rem/1.3 var(--sc-font-text);color:var(--paper-soft);margin-bottom:.9rem!important} .source-text{font-size:var(--t-quote);line-height:1.6;color:var(--paper-soft)} .source-text+.source-text{margin-top:.35rem!important} .qtext{display:block;width:min(22em,100%);font-size:var(--t-quote);font-weight:600;line-height:1.6;letter-spacing:-.005em} #src-q{color:var(--paper-text)} .ghost{visibility:hidden} .cite{font-size:.68em;font-weight:700;vertical-align:.5em;margin-left:.18em;letter-spacing:0} .sh-hl{background-image:linear-gradient(transparent 60%,rgba(30,58,138,.26) 60%); background-repeat:no-repeat;background-size:var(--hl,0%) 100%; -webkit-box-decoration-break:clone;box-decoration-break:clone} html[data-theme="dark"] .side--paper .sh-hl{background-image:linear-gradient(transparent 60%,rgba(96,165,250,.32) 60%)} .sh-hl--ink{background-image:linear-gradient(transparent 60%,rgba(96,165,250,.30) 60%);background-size:100% 100%} .you-line{font-size:clamp(1.5rem,1rem + 1.45vw,2.3rem);font-weight:800;line-height:1.14;letter-spacing:-.026em; max-width:17em;margin-top:clamp(1.75rem,5vh,3rem)!important;color:var(--paper-text)} .q{display:flex;justify-content:flex-end;max-width:38rem} .q p{background:var(--ink-text);color:#1a1a2e;border-radius:16px 16px 4px 16px; padding:.75em 1.05em;font-size:var(--t-quote);line-height:1.5;max-width:24em;box-shadow:var(--shadow-ink)} .answer{margin-top:1rem;max-width:38rem;background:var(--ink-surface);border:1px solid var(--hair-ink); border-radius:16px 16px 16px 4px;padding:1.3rem 1.5rem 1.2rem;box-shadow:var(--shadow-ink)} .answer p{font-size:var(--t-quote);line-height:1.6;color:var(--ink-soft)} .answer p+p{margin-top:.55rem} .answer .who{font:600 .8125rem/1.3 var(--sc-font-text);color:var(--ink-soft);margin-bottom:.75rem} .who-sep{margin-inline:.35em} .slot{position:relative} .slot .qtext{color:var(--ink-text)} .slot .qtext,.slot .qm{opacity:var(--land,0)} .slot .qm{position:absolute;left:-.55em;top:0;font-size:var(--t-quote);font-weight:600;line-height:1.6;color:var(--ink-text)} .slot .qm-close,.slot .cite{opacity:var(--cite,0)} .slot .cite{color:var(--ink-accent)} .cite-line{font-size:.8125rem!important;color:var(--ink-soft)!important;opacity:var(--cite,0);margin-top:.8rem!important} .peak .sh-btn{margin-top:1.5rem} .flyer{position:absolute;left:0;top:0;z-index:30;pointer-events:none;opacity:0; background:var(--paper-card);color:var(--paper-text);border-radius:var(--r-s);padding:.3rem .55rem; box-shadow:var(--shadow-slip);will-change:transform,opacity;transform-origin:30% 50%} .flyer .qtext{width:auto} .rm-arrow{display:none} /* ------------------------------------------------- hero: name the two games --- */ .hero-cue{margin-top:.75rem!important;max-width:22em;font-size:.9375rem;line-height:1.5;color:var(--paper-soft)} .hero-arrow{display:block;width:3.6rem;height:auto;margin:1.5rem 0 .4rem .3rem;rotate:90deg;filter:var(--draw-paper)} /* ------------------------------------------------------------- 4 · rules --- Revision 3: one row per rule across the seam, counterexample on paper, example on ink. Page JS adds .rl-armed to the section and .is-on to each row once it is half in view: the strike draws across the paper card and the marker sweeps the ink sentence. Without JS both show drawn. */ .rules2{padding-block:clamp(3rem,7vh,4.75rem)} .rl-head{padding-bottom:1.6rem} .rl-head .side-body{max-width:33rem} .rl-head--ink{display:flex;align-items:flex-end} .rl-legend{display:grid;gap:.2rem;max-width:30rem;font-size:.9375rem;line-height:1.45;color:var(--ink-soft)} .rl-legend-note{font-size:.8125rem} .rl-row{padding-block:1rem 1.1rem} .side--paper.rl-row{border-top:1px solid var(--hair-paper)} .side--ink.rl-row{border-top:1px solid var(--hair-ink)} .rl-name{font-size:1.1875rem!important;line-height:1.3!important;letter-spacing:-.012em!important;margin-bottom:.75rem!important} .rl-ok{display:flex;align-items:center;gap:.55rem;margin-bottom:.75rem!important;font-size:.9375rem;font-weight:600; line-height:1.544rem;color:var(--ink-accent)} .rl-ok::before{content:"";width:.9rem;height:.5rem;border-left:2.5px solid currentColor;border-bottom:2.5px solid currentColor; rotate:-45deg;translate:0 -2px} .rl-cell{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.25rem;align-items:center;max-width:36rem} .rl-card{position:relative;border-radius:var(--r-m);padding:.95rem 1.1rem} .rl-card p{font-size:1.0625rem;line-height:1.5} .rl-card--bad{background:var(--paper-card);border:1px solid var(--hair-paper);box-shadow:var(--shadow-paper)} .rl-card--bad p{color:var(--paper-soft);text-decoration:line-through 2px var(--paper-text);text-decoration-skip-ink:none; transition:opacity 500ms var(--sc-ease-out),text-decoration-color 700ms var(--sc-ease-out)} .rl-card--good{background:var(--ink-surface);border:1px solid var(--hair-ink);box-shadow:var(--shadow-ink)} .rl-card--good p{color:var(--ink-text);font-weight:600} .rl-card--good mark{color:inherit;background:linear-gradient(transparent 58%,rgba(96,165,250,.34) 58%) no-repeat; background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone; transition:background-size 900ms 250ms var(--sc-ease-out)} .rl-armed .rl-row:not(.is-on) .rl-card--bad p{text-decoration-color:transparent} .rl-armed .rl-row:not(.is-on) .rl-card--good mark{background-size:0% 100%} .rl-armed .rl-row.is-on .rl-card--bad p{opacity:.62} .rl-art{width:clamp(7.5rem,11vw,11rem);margin:0} .rl-art img{display:block;width:100%;height:auto;max-height:9.5rem;object-fit:contain;object-position:50% 50%} .side--paper .rl-art img{filter:var(--draw-paper)} .side--ink .rl-art img{filter:var(--draw-ink)} .rl-fmt-text{font-size:1rem;line-height:1.6;color:var(--paper-soft);max-width:34rem} .rl-fmt .rl-cell{align-items:center} .fmt-num{font:800 clamp(2.6rem,1.6rem + 2.6vw,3.8rem)/1 var(--sc-font-display);letter-spacing:-.04em;color:var(--ink-text); font-variant-numeric:tabular-nums} /* ----------------------------------------------------------- base kit ----- */ .built{padding-block:clamp(3rem,7vh,4.75rem)} .sh-art--hand{width:min(11rem,40%);margin-top:1.6rem!important} .checks{display:grid;gap:1.15rem;max-width:34rem;padding-top:.2rem!important} .checks li{position:relative;padding-left:2rem;font-size:1.0625rem;line-height:1.58;color:var(--ink-soft)} .checks li::before{content:"";position:absolute;left:0;top:.38em;width:1.05rem;height:.6rem; border-left:2.5px solid var(--ink-accent);border-bottom:2.5px solid var(--ink-accent);rotate:-45deg;translate:0 -2px} .checks b{color:var(--ink-text);font-weight:700} .bots{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem} .bots span{font:600 .8125rem/1 var(--sc-font-text);color:var(--ink-text);border:1px solid var(--hair-ink); background:rgba(232,234,242,.06);border-radius:var(--r-s);padding:.42rem .6rem} /* -------------------------------------------------------------- 5 · time --- A flow act since revision 2 (the pinned version faded its lists out). Rows: the two lists, then the verdict across the seam. --age (0..1) comes from the act's progress (home-split.js). */ .age{grid-template-areas:"pa ia" "ca cb";padding-block:clamp(3rem,7vh,4.75rem); --age:clamp(0,calc((var(--sc-p,0) - .22) * 3),1)} .age-pa{grid-area:pa} .age-ia{grid-area:ia} .age-ca{grid-area:ca} .age-cb{grid-area:cb} .age-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:start;margin-top:1.6rem} .age-ia .age-row{grid-template-columns:auto minmax(0,1fr);margin-top:0;align-items:center} .age-art{margin:0} .age-art img{display:block;width:100%;height:auto} .age-art--decay{width:clamp(7.5rem,10vw,10rem);margin-top:2.2rem} .age-art--decay img{transform-origin:50% 100%; filter:var(--draw-paper) grayscale(calc(var(--age,0) * 1)) opacity(calc(1 - var(--age,0) * .45)); rotate:calc(var(--age,0) * -2deg)} .age-art--alive{width:clamp(6.5rem,8.5vw,8.5rem)} .age-art--alive img{scale:calc(1 + var(--age,0) * .06);transform-origin:50% 100%} .age-list h3{margin-bottom:.7rem!important} .age-list ul{display:grid;gap:.5rem} .age-list li{position:relative;padding-left:1.1rem;font-size:1rem;line-height:1.5;color:var(--paper-soft)} .age-list li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:.42rem;border-radius:50%; background:var(--paper-soft);opacity:.6} .age-ia .sh-lede{font-size:1rem} .ritual{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2rem;margin:1.6rem 0 0;max-width:36rem} .ritual dt{font-size:1.0625rem;font-weight:700;color:var(--ink-text);line-height:1.3} .ritual .cad{display:block;font:600 .875rem/1.3 var(--sc-font-text);color:var(--ink-accent);margin-bottom:.3rem} .ritual dd{margin:.4rem 0 0;font-size:.9875rem;line-height:1.55;color:var(--ink-soft)} .age-ca{font-size:clamp(1.35rem,.9rem + 1.05vw,1.8rem)!important} .age-cb{padding-top:clamp(2rem,5vh,3.25rem);padding-left:var(--gut)!important} .age-cb .age-cross{margin-left:calc(.32em - var(--gut))} .age-cross{font-family:var(--sc-font-display);font-weight:800;font-size:clamp(1.35rem,.9rem + 1.05vw,1.8rem); letter-spacing:-.03em;line-height:1.1;color:var(--ink-text)} .verdict-num{margin-top:1.2rem!important;font:800 clamp(3rem,2rem + 3vw,4.6rem)/1 var(--sc-font-display); letter-spacing:-.045em;color:var(--ink-accent);font-variant-numeric:tabular-nums} .verdict-cap{margin-top:.75rem!important;font-size:1rem;line-height:1.55;color:var(--ink-soft);max-width:31rem} .age-ia{padding-top:clamp(2.2rem,5vh,3.25rem)} /* -------------------------------------------------- 6 · audit or website --- */ .svc{grid-template-rows:repeat(7,auto);grid-auto-flow:column;padding-block:clamp(3rem,7vh,4.75rem)} .svc-head{padding-bottom:1.6rem} .svc-head .sh-stack,.svc-ink-head{max-width:34rem} .svc-head .sh-stack{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.25rem;align-items:end} .svc-head .sh-stack>*{grid-column:1} .svc-head .sh-stack>.sh-art--tape{grid-column:2;grid-row:2 / span 2;margin-top:0!important;align-self:end} .svc-ink-head{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-end;gap:1.25rem;height:100%} .sh-art--tape{width:clamp(7rem,9vw,9rem)} .sh-art--toolbox{width:clamp(6.5rem,8.5vw,8.5rem);flex:none} .svc-title{margin-top:1rem!important;display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .7rem} .svc-title b{font-size:1.25rem;font-weight:800;letter-spacing:-.018em} .svc-title span{font-size:.9375rem;font-weight:500} .side--paper .svc-title span{color:var(--paper-soft)} .side--ink .svc-title span{color:var(--ink-soft)} .side--ink .svc-title b{color:var(--ink-accent)} .svc-cell{padding-block:1rem} .svc-cell>*{max-width:34rem} .side--paper.svc-cell{border-top:1px solid var(--hair-paper)} .side--ink.svc-cell{border-top:1px solid var(--hair-ink)} .svc-cell p{font-size:1rem;line-height:1.55} .side--paper.svc-cell p{color:var(--paper-soft)} .side--ink.svc-cell p{color:var(--ink-soft)} .svc-k{font:600 .875rem/1.3 var(--sc-font-text);margin-bottom:.3rem!important} .side--paper .svc-k{color:var(--paper-text)!important} .side--ink .svc-k{color:var(--ink-text)!important} .svc-price p:not(.svc-k){font-size:1.25rem!important;font-weight:800;letter-spacing:-.015em;font-variant-numeric:tabular-nums} .side--paper.svc-price p:not(.svc-k){color:var(--paper-text)!important} .side--ink.svc-price p:not(.svc-k){color:var(--ink-text)!important} .svc-blank{border-top:0!important} .svc-callout{border-top:0!important;padding-top:1.4rem} .svc-callout>*{max-width:34rem} .callout-h{font-size:1.125rem!important;font-weight:700;color:var(--paper-text)!important;margin-bottom:.5rem!important} .svc-callout b{color:var(--paper-text)} /* ------------------------------------------------------------------- face --- */ .face{padding-block:clamp(2.25rem,5vh,3.25rem);align-items:center} .face-id{display:flex;align-items:center;gap:1.1rem;justify-content:flex-end;padding-right:.4rem} .face-id img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;box-shadow:var(--shadow-paper)} .face-id b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.015em} .face-id span{display:block;font-size:.9375rem;color:var(--paper-soft)} .face-line{font:800 clamp(1.35rem,1rem + 1.1vw,1.95rem)/1.2 var(--sc-font-display);letter-spacing:-.024em; color:var(--ink-text);max-width:19em;text-wrap:balance} /* ----------------------------------------------------------------- prices --- */ .prices{grid-template-areas:"ph ih" "pc ic" "pn in";padding-block:clamp(3rem,7vh,4.75rem)} .pr-ph{grid-area:ph} .pr-pc{grid-area:pc} .pr-pn{grid-area:pn} .pr-ih{grid-area:ih} .pr-ic{grid-area:ic} .pr-in{grid-area:in} .pr-ih{display:flex;align-items:flex-end} .pr-pc,.pr-ic{display:flex;flex-direction:column} .cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.8rem;max-width:40rem;flex:1} .sh-card{background:var(--paper-card);border:1px solid var(--hair-paper);border-radius:14px;padding:1.3rem 1.25rem 1.35rem; box-shadow:var(--shadow-paper);display:flex;flex-direction:column} .sh-card--featured{border-color:var(--paper-accent);box-shadow:0 0 0 1px var(--paper-accent),var(--shadow-paper)} .sh-card .tier{font-size:1.0625rem;font-weight:700} .sh-card .price{margin-top:.5rem!important;font-size:1.3rem;font-weight:800;letter-spacing:-.018em;line-height:1.25; font-variant-numeric:tabular-nums} .sh-card .price small{display:block;font-size:.875rem;font-weight:500;letter-spacing:0;color:var(--paper-soft);margin-top:.2rem} .sh-card .when{margin-top:.55rem!important;font:600 .875rem/1.3 var(--sc-font-text);color:var(--paper-accent)} .sh-card ul{margin-top:.9rem!important;display:grid;gap:.45rem;flex:1} .sh-card li{position:relative;padding-left:1rem;font-size:.9375rem;line-height:1.48;color:var(--paper-soft)} .sh-card li::before{content:"";position:absolute;left:0;top:.6em;width:.38rem;height:.38rem;border-radius:50%;background:var(--paper-accent)} .sh-card li.no::before{background:var(--paper-soft);opacity:.55} .sh-card .sh-btn{margin-top:1.1rem;align-self:stretch;white-space:normal;text-align:center} .prices .sh-note{margin-top:1.2rem!important} .sh-card--ink{background:var(--ink-surface);border-color:var(--hair-ink);box-shadow:var(--shadow-ink)} .sh-card--ink .price small,.sh-card--ink li{color:var(--ink-soft)} .sh-card--ink .when{color:var(--ink-accent)} .sh-card--ink li::before{background:var(--ink-accent)} .prices .sh-lede--ink{max-width:28rem} .prices .sh-note--ink{margin-top:1.2rem!important} /* ---------------------------------------------------------------- sources --- */ .sh-sources{padding-block:clamp(2.25rem,5vh,3.25rem)} .src-list{max-width:34rem} .src-list h2{font-size:1.25rem;margin-bottom:1rem!important} .src-list p{font-size:.9375rem;line-height:1.55;color:var(--paper-soft)} .src-list p+p{margin-top:.8rem} .src-list a{color:var(--paper-text)!important;font-weight:600;text-decoration:underline;text-decoration-thickness:1px; text-underline-offset:.2em} .src-list--ink{padding-top:2.25rem} .src-list--ink p{color:var(--ink-soft)} .src-list--ink a{color:var(--ink-text)!important} /* ---------------------------------------------------------- 7 · the close --- */ .closer{height:100vh;height:100svh;display:flex;align-items:center;color:var(--ink-text)} .closer-body{width:min(40rem,calc(50% - var(--gut) * 2));margin-left:calc(50% + var(--gut)); /* start: just right of the seam; end (--c 1): centred in the full ink frame */ translate:calc(var(--c,0) * (-50% - var(--gut))) 0} .closer-body h2{font-size:clamp(1.9rem,1.2rem + 1.8vw,2.8rem)} .closer-body p{margin-top:1.1rem!important;font-size:var(--t-body);line-height:1.62;color:var(--ink-soft);text-wrap:pretty} .closer-body .closer-promise{color:var(--ink-text);font-weight:600} .closer-body p:last-child{margin-top:2rem!important} /* the footer continues the resolved frame */ :is(.split-home,.split-page) .site-footer{background:var(--ink-ground);border-top:0;color:var(--ink-soft); --ink:var(--ink-text);--ink-2:var(--ink-soft);--ink-3:#8f96aa;--ink-3t:#a9aebc;--accent:var(--ink-accent); --bd:rgba(232,234,242,.14);--bg-alt:var(--ink-ground)} :is(.split-home,.split-page) .site-footer .brand,:is(.split-home,.split-page) .site-footer .brand-name{color:var(--ink-text)} :is(.split-home,.split-page) .site-footer .brand-name strong{color:var(--ink-accent)} :is(.split-home,.split-page) .site-footer .brand img{filter:invert(1) hue-rotate(180deg) saturate(1.35) brightness(1.05)} /* short screens (a phone held sideways): the fixed seam labels would sit on top of flowing text */ @media (max-height:560px){.seam-chrome{display:none}} /* ================================================== phone: horizontal split == Paper on top, ink below, a hand-drawn horizontal seam between them. */ @media (max-width:760px){ :is(.split-home,.split-page) .ground,.seam-chrome{display:none} .split{grid-template-columns:1fr} .side--paper{background:var(--paper)} .side--ink{background:var(--ink-ground)} .seam-h{display:block;position:absolute;z-index:4;top:-1px;left:0;width:100%;height:60px;pointer-events:none} .seam-h path{fill:var(--paper)} body:is(.split-home,.split-page){--gut:1.25rem;--t-display:1.75rem} .side-body{max-width:none} /* hero: flow on phones (home-split.js), so the H1 and the CTA sit in the first screen */ .sh-hero{height:auto} .sh-hero .side-body{padding-top:1.4rem} .sh-hero .side--paper .side-body{padding-bottom:1.6rem;flex-direction:row;align-items:center;gap:1rem} .sh-hero .side-head{font-size:1.3rem;max-width:9em;flex:1} .plane--list{width:40%;margin:0;scale:none;opacity:1} .sh-hero .side--ink .side-body{padding-top:2.4rem;padding-bottom:2.2rem} .sh-hero h1{max-width:none} .hero-lede{font-size:1rem} .sh-hero .sh-ctas{margin-top:1.2rem} .sh-hero .sh-btn{white-space:normal} .answer-wrap{display:none} .plane--far{width:150%;left:-30%;top:-10%} .duel{grid-template-areas:"a" "ca" "cb" "b";padding-block:0} .duel-a{padding-top:2.6rem} .cross{font-size:1.75rem!important} .cross--a{text-align:left;padding:1.2rem var(--gut) 2rem} .cross--b{padding:2.2rem var(--gut) .8rem} .duel-b{padding-bottom:2.6rem;padding-top:.6rem} .peak{grid-template-rows:40% 60%} .peak .side--paper .side-body{padding-top:1.6rem} .peak .side--ink .side-body{padding-top:2.2rem} .source{padding:.9rem 1rem 1rem} .source-label{margin-bottom:.45rem!important;font-size:.8125rem} body:is(.split-home,.split-page){--t-quote:.9375rem} .you-line{font-size:1.25rem;margin-top:.9rem!important} .q p{font-size:.9375rem;padding:.6em .9em} .answer{margin-top:.7rem;padding:.9rem 1rem} .answer .who{margin-bottom:.4rem;font-size:.75rem} .answer p+p{margin-top:.35rem} .cite-line{margin-top:.45rem!important} .peak .sh-btn{margin-top:.9rem;padding:.75rem 1.1rem} .slot .qm{left:-.5em} .built,.svc,.sh-sources,.face,.age{padding-block:0} .built .side--paper,.prices .side--paper,.sh-sources .side--paper{padding-block:2.4rem 1.9rem} .built .side--ink,.prices .side--ink,.sh-sources .side--ink{padding-block:2.4rem 2.2rem} /* aging, phone reading order: the neglected page, the verdict across the seam, the rhythm */ .age{grid-template-areas:none} .age>.side{grid-area:auto} .age-pa{padding-top:2.4rem} .age-ca{text-align:left;padding:1.4rem var(--gut) 2rem!important;font-size:1.45rem!important} .age-cb{padding:2.2rem var(--gut) .6rem!important} .age-cb .age-cross{margin-left:0;font-size:1.45rem} .age-ia{padding-block:1.6rem 2.2rem} .age-art--decay{width:5.5rem;margin-top:.4rem} .age-art--alive{width:5.5rem} .rules2{padding-block:0} .rl-head{padding-top:2rem;padding-bottom:1.4rem} .rl-head--ink{padding-block:1.8rem 1.4rem} .rl-row{padding-block:1.1rem 1.2rem} .side--ink.rl-row{border-top:0;padding-top:1.6rem} .rl-row:last-child{padding-bottom:2rem} .rl-art{width:6.75rem} .rl-card p{font-size:1rem} .duel2{grid-template-rows:auto 1fr} .duel2 .side--paper .side-body{padding-top:1.2rem;padding-bottom:1rem} .duel2 .side--ink .side-body{padding-top:1.9rem} .duel2 h2{font-size:1.25rem} .duel-sub{font-size:.875rem;margin-top:.35rem!important} .serp{margin-top:.7rem!important;padding:.55rem .6rem .6rem} .serp-q{font-size:.8125rem;padding:.3rem .55rem;margin-bottom:.25rem!important} .serp-list li{font-size:.8125rem;padding:.16rem .3rem} .serp-list span{font-size:.75rem} .serp-out{font-size:.8125rem;margin-top:.35rem!important} .duel-answer{margin-top:.6rem} .duel2 .duel-punch--late{font-size:1.15rem;margin-top:.8rem!important} .duel-name{padding-block:0} .prices{grid-template-areas:none} .prices>.side{grid-area:auto;padding-block:0!important} .pr-ph{padding-top:2rem!important} .pr-pn{padding-block:1rem 1.6rem!important} /* .prices>.side zeroes the padding with the same !important and a higher specificity, so this one names the parent too; it clears the 60 px hand-drawn ink edge (2026-10-27). */ .prices>.pr-ih{padding-top:2.6rem!important} .pr-in{padding-block:1rem 1.8rem!important} .cards--one{grid-template-columns:1fr} .sh-hero .side--paper .side-body{flex-wrap:wrap} .hero-cue{order:3;flex-basis:100%;margin-top:.2rem!important;font-size:.875rem} .hero-arrow{display:none} .ritual{grid-template-columns:1fr} .svc{grid-template-rows:none;grid-auto-flow:row} .svc-head{padding-top:2.4rem} .side--ink.svc-head{padding-top:2.4rem} .svc-blank{display:none} .svc-callout{padding-bottom:2.2rem} .face .side--paper{padding-block:2rem 1.6rem} .face .side--ink{padding-block:2.2rem 2.2rem} .face-id{justify-content:flex-start} .cards{grid-template-columns:1fr} .src-list--ink{padding-top:0} } /* compact phones (360x640 class): the peak must fit one held frame */ @media (max-width:760px) and (max-height:700px){ body:is(.split-home,.split-page){--t-quote:.875rem} .peak{grid-template-rows:43% 57%} .peak .side--paper .side-body{padding-top:1rem} .peak .side--ink .side-body{padding-top:1.8rem} .source{padding:.75rem .9rem .8rem} .source-label{font-size:.75rem;margin-bottom:.35rem!important} .source-text,.answer p{line-height:1.5} .qtext,.slot .qm{line-height:1.5} .you-line{font-size:1.1rem;margin-top:.6rem!important} .q p{font-size:.875rem;padding:.5em .8em} .answer{margin-top:.6rem;padding:.75rem .9rem} .answer .who{font-size:.7rem;margin-bottom:.3rem} .answer p+p{margin-top:.3rem} .cite-line{font-size:.75rem!important;margin-top:.35rem!important} .peak .sh-btn{margin-top:.6rem;padding:.65rem 1rem} } /* ============================================= flow versions of pinned acts == home-split.js turns a pinned act into an ordinary section (class is-flow) on phones, on short screens, and under reduced motion. The frame then shows its resolved state. */ .is-flow .sh-hero,.is-flow .peak,.is-flow .closer{position:relative} .is-flow .sh-hero,.is-flow .peak{height:auto;min-height:100vh;min-height:100svh} .is-flow .sh-hero .side{overflow:visible} .is-flow .sh-hero .side-body,.is-flow .peak .side-body{padding-bottom:clamp(3rem,8vh,5rem)} .is-flow .closer{height:auto;min-height:0;padding-block:clamp(3.5rem,9vh,6rem);background:var(--ink-ground)} .is-flow .closer-body{margin-inline:auto;translate:none;width:min(40rem,calc(100% - var(--gut) * 2))} @media (max-width:760px){ .is-flow .closer{padding-block:3rem 2.6rem} } /* reduced motion: the resolved state, no pinned scroll */ .rm .plane--list,.rm .plane--answer{scale:none;opacity:1} .rm .sh-hl{--hl:100%} .rm .peak{--land:1;--cite:1} .rm .flyer{display:none} .rm .age{--age:.85} .rm .peak .rm-arrow{display:block;position:absolute;z-index:5;left:50%;top:44%;width:min(12rem,16vw); height:auto;translate:-62% 0;pointer-events:none;filter:var(--draw-paper)} @media (max-width:760px){ .rm .peak .rm-arrow{left:62%;top:38%;width:5.5rem;rotate:90deg} } /* phone length budget (revision 2b): the drawings that only decorate a list stay on desktop */ @media (max-width:760px){ .sh-art--tape,.sh-art--toolbox,.sh-art--hand{display:none} .svc-head .sh-stack{display:block} .built .side--paper,.prices .side--paper,.sh-sources .side--paper{padding-block:2rem 1.6rem} .built .side--ink,.prices .side--ink,.sh-sources .side--ink{padding-block:2rem 1.8rem} .svc-head,.side--ink.svc-head{padding-top:2rem} .svc-cell{padding-block:.75rem} .age-pa{padding-top:2rem} .age-ia{padding-bottom:1.8rem} .sh-card{padding:1.1rem 1.05rem 1.15rem} .sh-card ul{margin-top:.7rem!important;gap:.35rem} .src-list p{font-size:.875rem} } /* revision 3b: late lines inside the duel frame, the signature in the close */ .duel2 .duel-sub b{color:var(--paper-accent);font-weight:800} .duel2 .side--ink .duel-sub b{color:var(--ink-accent)} .duel2 .q{margin-top:1rem} .duel-late{margin-top:1rem!important;max-width:32rem;font-size:1rem;line-height:1.55;color:var(--ink-soft);opacity:var(--late,1)} .duel-late .sh-link{white-space:nowrap} .duel-late--paper{font:800 clamp(1.1rem,.9rem + .55vw,1.4rem)/1.25 var(--sc-font-display);letter-spacing:-.018em; color:var(--paper-text);opacity:var(--out,1)} .closer-body .closer-sign{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem!important;font-size:.9375rem!important;line-height:1.5} .closer-body .closer-sign img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover;flex:none} .closer-sign b{color:var(--ink-text)} @media (max-width:760px){ .duel-late{font-size:.875rem;margin-top:.6rem!important} .duel-late--paper{font-size:1rem} } :is(.split-home,.split-page) .nowrap{white-space:nowrap} /* revision 3: the base kit's own drawing (replaces the OK-hand), larger */ .sh-art--kit{width:min(15rem,52%);margin-top:1.4rem!important} @media (max-width:760px){.sh-art--kit{width:10rem}} /* ============================ revision 4 (2026-10-15): more visual ============================= Sixteen new drawings (art-rev4, gpt-image-2). Planes in the hero, a pair at the foot of the two games, a pair in the crossing, the chains under the receipt, the split page above the rules, the shop front pair in the aging act, bigger tools in audit-or-website plus the handover sheet, the watered page beside the care card, the checked sheet in the close. Everything below the fold is lazy; the big pieces are hidden on phones (length budget) and on frames too short to hold them. */ /* hero: far plane = results page (paper) and chat window (ink), mid = list and answer, near = lens */ /* the far planes clip at their own foot: the flow hero (reduced motion, short frames) lets the side overflow, and a 1100px page drawing would otherwise run on under the next act's copy */ .sh-hero .plane--page{width:min(46rem,118%);left:-8%;top:30%;height:68%;overflow:clip;opacity:.2} .sh-hero .plane--page img{filter:var(--draw-paper)} .sh-hero .side--ink .plane--chat{width:min(36rem,92%);left:auto;right:-9%;top:50%;height:48%;overflow:clip;opacity:.17} .sh-hero .plane--chat img{filter:var(--draw-ink)} html[data-theme="dark"] .sh-hero .plane--page{opacity:.16} /* the lens sits over the right end of the circled result: the list is the last child of the paper side-body, so its bottom is the body's bottom; the circled row's centre is 43% up the list */ .sh-hero .lens{position:absolute;z-index:4;left:min(14.6rem,46%);bottom:2.3rem;width:min(12rem,24vh);height:auto; max-width:none;margin:0;pointer-events:none;filter:var(--draw-paper)} /* the two games: the podium pair sits at the foot of each side, under the punch lines */ .duel2 .duel-art{display:none;position:absolute;right:var(--gut);bottom:3vh;width:min(15rem,24vh);margin:0;z-index:1} .duel2 .duel-art img{display:block;width:100%;height:auto} .duel2 .side--paper .duel-art img{filter:var(--draw-paper)} .duel2 .side--ink .duel-art img{filter:var(--draw-ink)} .duel2 .duel-late--paper{max-width:21em} @media (min-width:1024px) and (min-height:840px){.duel2 .duel-art{display:block}} /* the crossing: the cut page under the "you" line, the pasted answer under the CTA (it appears as the sentence lands, from --land; nothing leaves the frame) */ .peak .peak-art{display:none;position:absolute;bottom:4vh;height:min(30vh,19rem);margin:0;z-index:1} .peak .peak-art img{display:block;height:100%;width:auto} .peak .side--paper .peak-art{left:var(--gut)} .peak .side--paper .peak-art img{filter:var(--draw-paper)} .peak .side--ink .peak-art{right:var(--gut);opacity:var(--land,1)} .peak .side--ink .peak-art img{filter:var(--draw-ink)} @media (min-width:1024px) and (min-height:700px){.peak .peak-art{display:block}} /* the rules: the split page beside the legend; the rule drawings a quarter larger (Dave: bigger) */ .rl-head--ink{align-items:flex-end;gap:1.5rem} .rl-head-art{width:min(13rem,42%);flex:none;margin:0} .rl-head-art img{display:block;width:100%;height:auto;filter:var(--draw-ink)} .rl-art{width:clamp(9rem,13vw,13rem)} .rl-art img{max-height:10.5rem} .rl-row{padding-block:.8rem .9rem} /* the aging act: the shop front pair, larger than the doodles it replaces */ .age-art--decay{width:clamp(10rem,15vw,15rem);margin-top:1.4rem} .age-art--alive{width:clamp(9rem,12vw,12rem)} /* audit or website: the tools larger (the heading spans both columns so the lede keeps its measure), the handover sheet in the former blank cell */ .svc-head .sh-stack>h2{grid-column:1 / -1} .sh-art--tape,.sh-art--toolbox{width:clamp(8.5rem,10.5vw,10.5rem)} .svc-art-cell{border-top:0!important;display:flex;align-items:flex-end;padding-top:1.2rem} .sh-art--handover{width:min(11rem,45%);margin:0} .sh-art--handover img{display:block;width:100%;height:auto} .svc-cell{padding-block:.85rem} /* pace (Dave: too many whitespaces): flow acts breathe a little less now that they carry pictures */ .rules2,.built,.age,.svc,.prices{padding-block:clamp(2.25rem,5vh,3.5rem)} .sh-sources{padding-block:clamp(2rem,4vh,2.75rem)} .cards{margin-top:1.4rem} /* prices: the watered page in the empty cell beside the care card */ .pr-art{align-self:end;justify-self:center;width:min(13rem,80%);margin:0 0 .5rem} .pr-art img{display:block;width:100%;height:auto;filter:var(--draw-ink)} /* the close: the checked sheet on the left, fading in as ink takes the frame */ .closer-art{position:absolute;left:clamp(1rem,4vw,4rem);top:50%;translate:0 -50%;width:min(17rem,20vw);margin:0; opacity:var(--c,1);z-index:0} .closer-art img{display:block;width:100%;height:auto;filter:var(--draw-ink)} .closer-body{position:relative;z-index:1} @media (max-width:1023px){.closer-art{display:none}} /* phones: the length budget. Hero planes, the podium and crossing pairs, the split page, the handover sheet and the watered page stay on desktop; the pairs that carry the point stay small. */ @media (max-width:760px){ .rules2,.built,.age,.svc,.sh-sources{padding-block:0} .prices{padding-block:clamp(1.5rem,4vh,2.5rem)} .sh-hero .plane--page,.sh-hero .plane--chat,.sh-hero .lens,.rl-head-art,.svc-art-cell,.pr-art{display:none} .rl-art{width:7rem} .rl-art img{max-height:7rem} .rl-row{padding-block:.9rem 1rem} .age-art--decay,.age-art--alive{width:6.5rem} .svc-cell{padding-block:.65rem} .built .side--paper,.prices .side--paper,.sh-sources .side--paper{padding-block:1.6rem 1.3rem} .built .side--ink,.prices .side--ink,.sh-sources .side--ink{padding-block:1.6rem 1.4rem} .age-ca{padding:1.2rem var(--gut) 1.6rem!important} .age-cb{padding:1.8rem var(--gut) .5rem!important} .pr-ph{padding-top:1.6rem!important} .pr-pn{padding-block:.8rem 1.3rem!important} .pr-in{padding-block:.8rem 1.4rem!important} .age-pa,.rl-head,.svc-head,.side--ink.svc-head{padding-top:1.6rem} } /* ============================ Version 3 (2026-10-16): the split stage, pushed ============================ impeccable `bolder` + `overdrive` on the incumbent (everything above this line is revision 4 as it was). Approved comp: .impeccable/mocks/v3-a-split-headline.png. The one decisive move: the seam carries the page's own headline, read across both grounds, and the two equal actions meet at it. Then the same world turned up: a deeper navy, the compass on the seam a size up, type and drawings a size up, the crossing gets a cut line, a bulging seam, a spinning compass and a landing pulse, the close is the person. Nothing fades out while it is read; the engine is untouched. */ /* ---------------------------------------------------------------- tokens: deeper navy, bigger type */ body:is(.split-home,.split-page){ --ink-ground:#121626; /* harder navy on the comp's blue-black hue; #e8eaf2 on it 15.9:1, #b8bdcc 9.8:1, #60a5fa 7.6:1 */ --ink-surface:#1c2140; --hair-ink:rgba(232,234,242,.18); --hdr:64px; /* the header's height, measured by home.js */ } html[data-theme="dark"] body:is(.split-home,.split-page){--ink-surface:#161b2a} @media (min-width:761px){ body:is(.split-home,.split-page){ --t-display:clamp(2.2rem,.9rem + 2.6vw,3.4rem); /* the split headline: two lines per half */ --t-h2:clamp(1.8rem,1.15rem + 1.55vw,2.6rem); --t-body:clamp(1.0625rem,1rem + .25vw,1.25rem); } } /* ------------------------------------------------------------------------- the seam chrome, a size up -- The header stays the shell's own (the approved comp keeps the white header bar); the ground starts under it as in revision 4. The compass mark on the seam is larger, and the H1 keeps a gap wide enough for it to pass. */ @media (min-width:761px){ .seam-label{font-size:1rem;font-weight:700;letter-spacing:0} .seam-mark{width:60px;height:60px;margin-left:-30px;rotate:var(--spin,0deg);transition:none} } /* ------------------------------------------------------------------------- 0 · hero: split headline -- A three-row grid on the stage: the lead line, the H1 read across the seam (one element, two spans, the first right-aligned to the seam in navy, the second left-aligned from it in white), then the two sides. Each side ends with one of the two equal actions, touching the seam, and its drawing. */ .v3-hero{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto minmax(0,1fr); grid-template-areas:"h1 h1" ". lede" "cta cta" "pm im";height:100vh;height:100svh} .v3-hero .hero-h1{grid-area:h1;display:grid;grid-template-columns:1fr 1fr;column-gap:4.5rem;align-items:start; margin:0;padding:clamp(1.6rem,5vh,3rem) var(--gut) 0;font-size:var(--t-display);font-weight:800;line-height:1.02; letter-spacing:-.034em;text-wrap:balance;max-width:none} .v3-hero .h1-a{justify-self:end;text-align:right;color:var(--paper-text);max-width:11.5em} /* the ink half starts one row lower: read across, every row is in sentence order (AI-láthatóság / magyar cégeknek: weboldal, amiből / a ChatGPT idéz) */ .v3-hero .h1-b{color:var(--ink-text);max-width:11.5em;margin-top:1.02em} .v3-hero .hero-lead{margin:0 0 .6rem!important;font:600 clamp(1rem,.9rem + .4vw,1.2rem)/1.3 var(--sc-font-text);color:var(--paper-soft)} .v3-hero .hero-pm{grid-area:pm} .v3-hero .hero-im{grid-area:im} .v3-hero .side{display:flex;flex-direction:column;overflow:clip;position:relative} .v3-hero .side-body{padding-top:clamp(1rem,2.6vh,1.6rem);max-width:none;display:flex;flex-direction:column;flex:1} .v3-hero .sh-btn{padding:1rem 1.5rem;font-size:1.0625rem} .v3-hero .hero-lede{grid-area:lede;margin:.9rem 0 0!important;padding:0 var(--gut);max-width:34em;font-size:var(--t-body); line-height:1.55;color:var(--ink-soft)} /* the two equal actions on one row, meeting at the seam */ .v3-hero .hero-ctas{grid-area:cta;display:grid;grid-template-columns:1fr 1fr;column-gap:2.6rem;margin:1.1rem 0 0;padding:0 var(--gut)} .v3-hero .hero-ctas .sh-btn:first-child{justify-self:end} .v3-hero .hero-ctas .sh-btn:last-child{justify-self:start} .v3-hero .plane--results{width:min(37rem,98%,48vh);margin:clamp(.6rem,2vh,1.2rem) 0 0 -.4rem;transform-origin:30% 30%; scale:calc(1 - var(--sc-p,0) * .08);opacity:calc(1 - var(--sc-p,0) * .3)} .v3-hero .plane--results img{filter:var(--draw-paper)} .v3-hero .answer-wrap{width:min(36rem,96%,62vh);margin-top:clamp(1.2rem,4vh,2.6rem)} .v3-hero .plane--answer{transform-origin:50% 90%;scale:calc(1 + var(--sc-p,0) * .08)} .v3-hero .side--ink .plane--answer img{filter:none} /* drawn white on navy, keyed; no inversion */ .v3-hero .plane--list,.v3-hero .lens,.v3-hero .hero-cue,.v3-hero .plane--page{display:none} /* the peak's mechanics, every width */ .cite{font-size:.75em} #src-q{position:relative;display:block} .cut{position:absolute;inset:-.3em -.55em;border:2px dashed var(--paper-accent);border-radius:8px;pointer-events:none; clip-path:inset(0 calc(100% - var(--cut,1) * 100%) 0 0 round 8px)} .answer{box-shadow:var(--shadow-ink),0 0 0 calc(var(--pulse,0) * 7px) rgba(96,165,250,.38)} .flyer{padding:.35rem .6rem} /* ======================= sections, desktop only (phones keep revision 4's tuned sizes) ======================= */ @media (min-width:761px){ /* ------------------------------------------------------------------------------ 1 · the two games -- */ .duel2 .side-body{padding-top:clamp(2rem,6vh,4rem);max-width:38rem} .duel-sub{font-size:1.0625rem;max-width:34rem} .serp{max-width:36rem;padding:1rem 1rem 1rem} .serp-list li{font-size:1rem;padding:.34rem .5rem} .serp-q{font-size:1rem} .serp-out{font-size:.9375rem} .duel2 .duel-punch--late{font-size:clamp(1.5rem,1.05rem + 1.25vw,2.2rem);max-width:20em} .duel2 .duel-late--paper{font-size:clamp(1.2rem,.95rem + .7vw,1.6rem);max-width:19em} .duel2 .duel-art{width:clamp(10rem,100vh - 740px,20rem);bottom:2.5vh} @media (min-width:1024px) and (min-height:780px){.duel2 .duel-art{display:block}} /* ------------------------------------------------------------------- 2 · the crossing (the peak) -- Pushed: a dashed cut line is drawn around the sentence before it lifts (the scissors of the drawing below), the slip is bigger in flight, the seam bulges wider where it passes, the compass on the seam turns once as the slip crosses, and the answer pulses as the sentence lands. All from --sc-p. */ .peak .side-body{padding-top:clamp(2.5rem,8vh,5rem)} @media (min-width:761px){.peak{--t-quote:clamp(1.125rem,.7rem + 1.05vw,1.55rem)}} .source{max-width:40rem;padding:1.6rem 1.8rem 1.7rem} .you-line{font-size:clamp(1.6rem,1rem + 1.7vw,2.6rem);max-width:14em;margin-top:clamp(1.4rem,4vh,2.5rem)!important} .peak .peak-art{height:min(28vh,17.5rem);bottom:2vh} .peak .sh-btn{margin-top:1.4rem;padding:1rem 1.5rem;font-size:1.0625rem} @media (min-width:1024px) and (min-height:680px){.peak .peak-art{display:block}} /* --------------------------------------------------------------------------------------- 4 · rules -- */ .rl-head-art{width:min(16rem,46%)} .rl-art{width:clamp(10rem,14vw,14rem)} .rl-art img{max-height:11.5rem} .rl-card p{font-size:1.125rem} .rl-name{font-size:1.3rem!important} .fmt-num{font-size:clamp(3rem,1.8rem + 3.2vw,4.8rem)} /* -------------------------------------------------------------------------------------- base kit -- */ .sh-art--kit{width:min(17rem,58%)} .checks li{font-size:1.125rem} /* ------------------------------------------------------------------------- 5 · time: no dead space -- The shop fronts are the size of the lists beside them, the verdict number is the biggest glyph on the page, and the cross line reads at the duel's scale. */ .age-art--decay{width:clamp(12rem,19vw,19rem);margin-top:.4rem} .age-art--alive{width:clamp(11rem,16vw,16rem)} .age-list li{font-size:1.0625rem} .age-ia .sh-lede{font-size:1.0625rem} .ritual dt{font-size:1.125rem} .ritual dd{font-size:1.0625rem} .age-ca,.age-cross{font-size:clamp(1.5rem,.9rem + 1.3vw,2.2rem)!important} .verdict-num{font-size:clamp(3.6rem,2.2rem + 4.2vw,6.8rem)} .verdict-cap{font-size:1.0625rem;max-width:33rem} /* ---------------------------------------------------------------- 6 · audit or website: no dead head -- The build drawing fills the ink head beside the paper lede; the measured page sits at the same scale. */ .sh-art--tape{width:clamp(11rem,14vw,14rem)} .sh-art--toolbox{width:clamp(13rem,17vw,17rem)} .svc-ink-head{align-items:flex-end;gap:1.5rem} .svc-head .sh-stack,.svc-ink-head{max-width:38rem} .sh-art--handover{width:min(13rem,50%)} .svc-cell p{font-size:1.0625rem} .svc-title b{font-size:1.4rem} /* ---------------------------------------------------------------------------------------- prices -- */ .pr-art{width:min(15rem,86%)} .sh-card .price{font-size:1.45rem} /* ------------------------------------------------------------------------------------------- pace -- */ .rules2,.built,.age,.svc,.prices{padding-block:clamp(1.75rem,4vh,2.75rem)} .sh-sources{padding-block:clamp(1.5rem,3vh,2.25rem)} } /* ------------------------------------------------------------------------- 7 · the close: the person -- No empty half at the start: the paper half carries the portrait from p 0 (a dark photo card, the one named person), the ink half the honesty note and both actions. The seam still travels to the left edge and ink takes the frame; the portrait stays, its caption turns light with --c. */ .closer{display:grid;grid-template-columns:1fr 1fr;align-items:center} .closer-who{grid-column:1;justify-self:center;width:min(21rem,calc(100% - var(--gut) * 2));margin:0;z-index:1; color:color-mix(in srgb,var(--paper-text) calc((1 - var(--c,1)) * 100%),var(--ink-text))} .closer-who img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-ink)} .closer-who figcaption{margin-top:1.1rem;font-size:1.0625rem;line-height:1.5} .closer-who b{display:block;font-size:1.4rem;font-weight:800;letter-spacing:-.018em;margin-bottom:.15rem} .closer-who span{display:block} .closer-body{grid-column:2;width:min(42rem,100%);margin-left:0;translate:none;padding-inline:var(--gut) 0} .closer-body h2{font-size:clamp(2.1rem,1.3rem + 2vw,3.1rem)} .closer-art{display:none} .closer-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem!important} .closer-ctas .sh-btn{padding:1rem 1.5rem;font-size:1.0625rem} .is-flow .closer{grid-template-columns:1fr 1fr} @media (min-width:1024px){.is-flow .closer{padding-block:clamp(3rem,8vh,5rem)}} .is-flow .closer-who{color:var(--ink-text)} .is-flow .closer-body{margin-inline:0;width:min(40rem,100%)} @media (max-width:1023px){ .closer,.is-flow .closer{grid-template-columns:1fr} .closer-who{grid-column:1;justify-self:stretch;width:auto;margin:0 0 .8rem;padding-inline:var(--gut);color:var(--ink-text); display:flex;align-items:center;gap:1rem} .closer-who img{width:5.5rem;flex:none} .closer-who figcaption{margin-top:0;font-size:1rem} .closer-who b{font-size:1.2rem} .closer-body{grid-column:1;padding-inline:var(--gut)} } /* ============================================================================ phones (<=760px) == */ @media (max-width:760px){ body:is(.split-home,.split-page){--t-display:1.85rem} .v3-hero{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:none;height:auto} .v3-hero .hero-h1{display:contents} .v3-hero .hero-h1,.v3-hero .hero-lede,.v3-hero .hero-ctas,.v3-hero .hero-pm,.v3-hero .hero-im{grid-area:auto} .is-flow .v3-hero{min-height:0} /* the phone hero ends where its content ends; the next act peeks at the foot */ .v3-hero .hero-pm{order:1} .v3-hero .hero-pm .side-body{padding:.7rem 0 0;flex-direction:column;align-items:stretch} .v3-hero .hero-lead{margin:0 0 .4rem!important;padding:0;font-size:1rem} .v3-hero .plane--results{width:min(13.5rem,100%);margin:0 auto .2rem;scale:none;opacity:1} .v3-hero .h1-a{order:2;display:block;justify-self:auto;text-align:left;max-width:none; padding:.3rem var(--gut) .9rem;font-size:var(--t-display);font-weight:800;line-height:1.05;letter-spacing:-.03em} .v3-hero .h1-b{order:3;display:block;position:relative;max-width:none;background:var(--ink-ground);margin-top:0; padding:1.6rem var(--gut) .2rem;font-size:var(--t-display);font-weight:800;line-height:1.05;letter-spacing:-.03em} .v3-hero .hero-lede{order:4;margin:0!important;padding:.4rem var(--gut) 0;max-width:none;background:var(--ink-ground);font-size:1rem} .v3-hero .hero-ctas{order:5;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.7rem var(--gut) 0;background:var(--ink-ground)} .v3-hero .hero-im{order:6} .v3-hero .hero-im .side-body{padding-top:0;padding-bottom:.6rem} .v3-hero .sh-btn{padding:.85rem 1.2rem;font-size:1rem;white-space:normal} .v3-hero .answer-wrap{display:block;width:min(14rem,72%);margin:.6rem 0 0} .closer-ctas{margin-top:1rem!important} } /* ------------------------------------------------------------------- 0 · hero: the scroll invitation -- Dave, 2026-10-17: "i only miss the down arrow from the hero to initiate scrolling". The site's own hand-drawn arrow, turned to point down, at the foot of the paper half beside the seam. It bobs gently, leaves as the hero starts to scroll, and a click glides to the two games (home.js). Phones flow the hero and the next heading already shows at the foot, so the arrow is desktop only, as in revision 4. */ /* Dave, 2026-10-24: "make the initial blue arropw to urge scrolling larger". The arrow is one long stroke, so its size is read as length: it is measured off the viewport height rather than set in rem, which keeps it big on a tall screen and off the hero's own art on a short laptop. The drawing is 725x151 and stands on its end, so its width is --arw * 151/725. */ .v3-down{--arw:clamp(9rem,25vh,15rem); position:absolute;z-index:6;left:calc(50% - 3.6rem - var(--arw) * .105); bottom:calc(var(--hdr,64px) + clamp(.6rem,2.5vh,1.6rem)); display:block;width:calc(var(--arw) * .21);height:var(--arw);opacity:calc(1 - var(--sc-p,0) * 5); animation:v3-bob 2.4s cubic-bezier(.45,0,.55,1) infinite} .v3-down img{position:absolute;left:50%;top:50%;width:var(--arw);height:auto;max-width:none; translate:-50% -50%;rotate:90deg;filter:var(--draw-paper)} .v3-down:focus-visible{outline:2px solid var(--paper-accent);outline-offset:6px;border-radius:4px} @keyframes v3-bob{0%,100%{translate:0 0}50%{translate:0 .7rem}} @media (prefers-reduced-motion:reduce){.v3-down{animation:none}} .is-flow .v3-hero{position:relative} /* the stage is only positioned (sticky) while pinned */ .rm .v3-down{animation:none;opacity:1} @media (max-width:760px){.v3-down{display:none}} /* ===================== revision 5, review round (Dave, 2026-10-21) ===================== Six notes from the live review of revision 5 (D:\WORK\.claude\reviews\miterkep-splitstage\). Everything here is a layer on the Version 3 build above; the engine stays untouched. */ /* ---------------------------------------------------------- #1 · the strikes land with a kick -- "i want the animation crossing out 4-10 much more gradual, one scroll once cross - it has to obviously make impact and force ppl to read". The timing lives in home-split.js (one slot per row); here each stroke kicks the row sideways and thickens as it is drawn (--hit peaks halfway). */ .serp-list li:nth-child(n+4){translate:calc(var(--s,1) * -6px + var(--hit,0) * 7px) 0; background:rgba(18,22,38,calc(var(--hit,0) * .07))} .serp-list li:nth-child(n+4)::after{height:calc(2px + var(--hit,0) * 2.5px); background:color-mix(in srgb,var(--paper-accent) calc(var(--hit,0) * 100%),var(--paper-text))} /* -------------------------------------------------------- #2 · the two podiums as one picture -- "the message of this compared to the one on the left is clear for me, not for those watching, they possibly need to be closer in the middle". Both drawings move in to the seam and sit at the same height, so the three-step podium and the single step read as one comparison. */ .duel2 .side--ink .duel-art{right:auto;left:2.2rem} .duel2 .side--paper .duel-art{right:2.2rem} @media (min-width:1024px){.duel2 .duel-art{bottom:3vh}} /* ------------------------------------------------------------ #5 · the drawings are drawn in -- "i want the images drawn out gradually". A soft diagonal mask lays each drawing down as it comes up the screen (--draw from home-split.js, monotonic, so nothing undraws). Without JS and under reduced motion the default is the finished drawing. */ .rules2 .rl-art img,.rules2 .rl-head-art img{ -webkit-mask-image:linear-gradient(100deg,#000 calc(var(--draw,1) * 150% - 50%),rgba(0,0,0,0) calc(var(--draw,1) * 150% - 20%)); mask-image:linear-gradient(100deg,#000 calc(var(--draw,1) * 150% - 50%),rgba(0,0,0,0) calc(var(--draw,1) * 150% - 20%))} @media (prefers-reduced-motion:reduce){ .rules2 .rl-art img,.rules2 .rl-head-art img{-webkit-mask-image:none;mask-image:none} } /* ------------------------------------------------------------------ #6 · the close: the photo -- "use a different picture, ones we used for the mi-terkep ads", then on the photographic cut-out: "this fuckin pic you used is awful". So it is the other ad portrait, the drawn one with the blue rim light and the glasses (Dave picked it from four comps, 2026-10-21), on its own white card, so it reads the same on paper and once ink has taken the frame. */ .closer-who img{box-shadow:var(--shadow-ink),0 0 0 1px rgba(18,22,38,.06)} /* FILM:BEGIN --------------------------------------------- the film (held frame, 2026-10-27) -- Dave, 2026-10-27: "let my videos do the explanation". The film sits where the proof and the map were, held like the film on /audit/. The player is never animated and never transformed: a transform on a