/* Base styles, the frame and the dashed dividers, copied from the locked prototype (docs/design/prototype/template.html, D10 T01 §6). Hello Elementor's reset.css and theme.css are dequeued in functions.php, so nothing restyles these. */ /* The prototype is rendered by a viewer whose page skeleton hides [hidden] outright; without this, a rule that sets display (such as .sheet ol) would show the help panel's hidden steps. (D10 T01 §9) */ [hidden] { display: none !important; } * { box-sizing: border-box; } body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--face); -webkit-font-smoothing: antialiased; } a { color: inherit; } h1, h2, h3 { font-weight: 500; letter-spacing: -0.02em; text-wrap: balance; margin: 0; } /* Pretty wrapping, so no paragraph ends on a lone word (home version 8, D11 T01 §2). */ p { margin: 0; text-wrap: pretty; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; } /* The frame: a centred column with dashed gutters, margins outside it (D16 T01 §29: --dots masked by the faint 45° lines that scripts/margin-tile.py prints, as in the prototype), and dashed full-bleed rules with small round markers where a rule crosses a gutter, painted above the frames so no edge runs through them (D10 T02 §1). Both dotted margins sit under the page's content (home version 8, D11 T01 §2), so the right-hand one no longer paints over the red hero, the closing band and the ticker. */ .page { position: relative; overflow: hidden; isolation: isolate; } .page::before, .page::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; width: calc((100% - var(--frame)) / 2); background-color: var(--dots); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M-120 120L0 0M-108 120L12 0M-96 120L24 0M-84 120L36 0M-72 120L48 0M-60 120L60 0M-48 120L72 0M-36 120L84 0M-24 120L96 0M-12 120L108 0M0 120L120 0M12 120L132 0M24 120L144 0M36 120L156 0M48 120L168 0M60 120L180 0M72 120L192 0M84 120L204 0M96 120L216 0M108 120L228 0M120 120L240 0' fill='none' stroke='%23000' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E") 0 0 / 120px 120px repeat; pointer-events: none; } .page::before { left: 0; } .page::after { right: 0; } .frame { position: relative; max-width: var(--frame); margin-inline: auto; border-inline: 1px dashed var(--line); background: var(--paper); } .rule { position: relative; height: 1px; background-image: linear-gradient(90deg, var(--line) 50%, transparent 50%); background-size: 16px 1px; } /* The marker is 11px across (9px inside a 1px border; a pseudo-element is content-box), odd, and offset 5px, so its centre falls on the centre of the 1px gutter line and of the 1px rule; the 10px one it replaced sat half a pixel off both. */ .rule::before, .rule::after { content: ""; position: absolute; z-index: 1; top: -5px; width: 9px; height: 9px; border: 1px solid var(--line); border-radius: 50%; background: var(--node); } .rule::before { left: calc(50% - var(--frame) / 2 - 5px); } .rule::after { right: calc(50% - var(--frame) / 2 - 5px); } @media (max-width: 1232px) { .rule::before, .rule::after { display: none; } } html, body { overflow-x: clip; } .band { padding-inline: 16px; } /* Buttons and pills (§7). Hovers change colour, border or background only, never size or position. The same declarations are the Elementor global classes (scripts/kit-tokens.py reads them from here). */ .btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: 999px; font: 500 15px/1 var(--face); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } .btn-line { border-color: var(--line); background: var(--paper); color: var(--ink); } .btn-line:hover { border-color: var(--ink); } .btn-red { background: var(--signal-fill); color: #fff; } .btn-red:hover { background: var(--signal-hover); } .btn-white { background: #fff; color: var(--night); min-height: 50px; padding: 12px 26px; font-weight: 600; } .btn-white:hover { background: var(--white-hover); } .btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; min-height: 50px; padding: 12px 26px; font-weight: 600; background: transparent; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.12); } /* Lucide arrows (D10 T02 §2), as in the prototype: sized to their text (1em); beside text an arrow is joined to the word next to it and centred on that word's line, so it never wraps onto a line alone. */ .ic { flex: none; } /* In a badge (a pill's or list's i, a bullet's b) the icon is a block, so the badge centres it without a text line around it (the pages render in standards mode, where an inline icon would sit on the line's baseline). */ i > .ic, b > .ic { display: block; } .ic-at { display: inline-flex; align-items: center; gap: 0.4em; white-space: nowrap; } .pill { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 999px; padding: 7px 8px 7px 18px; font-weight: 500; font-size: 15px; text-decoration: none; } /* The pill's arrow badge is drawn, not written: the prototype's `