/* ============================================================================ CISO.CAREERS — one site, two faces. SHINY = the brochure: bright, official, "everything is fine." REAL = what isn't visible: the corroded Otherworld a security pro lives in. The whole site is driven by — one toggle, every token flips. No frameworks, no web fonts. ========================================================================== */ /* ---- SHINY (default face) ------------------------------------------------ */ :root { --paper: #f6f8fc; --paper-2: #ffffff; --panel: #ffffff; --ink: #0f1b2d; --ink-soft: #33435a; --muted: #5c6b7f; --faint: #616d7d; --rule: #e3e9f2; --rule-bold: #cdd7e6; --accent: #1466ff; /* trust blue */ --accent-2: #0bb39a; /* fresh teal */ --accent-ink: #0f4fd6; --good: #1f9d57; --warn: #e6a400; --bad: #e0433f; --tell: #1466ff; /* the revealed line */ --sel: #cfe0ff; --shadow: 0 10px 30px rgba(16,36,64,.10); --shadow-sm: 0 3px 12px rgba(16,36,64,.08); --radius: 14px; --grain: 0; --vig: 0; --tri-a: #86c53f; /* left side — Skills (green) */ --tri-b: #ef6d7d; /* right side — Attitudes (pink) */ --tri-c: #4a90d9; /* base — Knowledge (blue) */ --tri-stroke: #ffffff; --face: #1f9d57; --serif: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --measure: 42rem; --gutter: clamp(1.15rem, 5vw, 2.25rem); } /* ---- REAL (the Otherworld) ----------------------------------------------- */ :root[data-mode="real"] { --paper: #0b0a09; --paper-2: #131110; --panel: #14110e; --ink: #d6cec1; --ink-soft: #aba192; --muted: #857b6d; --faint: #8a8072; --rule: #292420; --rule-bold: #3b332b; --accent: #c1481c; /* ember / rust */ --accent-2: #7c8a55; /* sickly institutional green */ --accent-ink: #d9662f; --good: #9a4a2c; /* "success" oxidises */ --warn: #b8791f; --bad: #a5201b; /* breached */ --tell: #d9662f; /* brighter ember: AA on --paper */ --sel: #3a2412; --shadow: 0 12px 34px rgba(0,0,0,.6); --shadow-sm: 0 3px 14px rgba(0,0,0,.5); --grain: .07; --vig: 1; --tri-a: #5f6a38; /* People — oxidised green */ --tri-b: #7a343a; /* Process — oxblood */ --tri-c: #3f5a72; /* Technology— cold steel */ --tri-stroke: #0b0a09; --face: #a5201b; } * { box-sizing: border-box; } /* anchors and the skip link must clear the pinned masthead */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 1.125rem; line-height: 1.72; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; transition: background-color .55s ease, color .55s ease; } ::selection { background: var(--sel); } /* Texture layers — invisible in shiny, present in real -------------------- */ body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998; transition: opacity .55s ease; } /* vignette + cold light bleed (real only) */ body::before { opacity: var(--vig); background: radial-gradient(120% 90% at 50% -10%, rgba(193,72,28,.10), transparent 55%), radial-gradient(130% 120% at 50% 120%, rgba(0,0,0,.75), transparent 60%), linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.28)); mix-blend-mode: multiply; } /* film grain (real only) */ body::after { opacity: var(--grain); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); } .narrow { --measure: 40rem; } /* Skip link ---------------------------------------------------------------- */ .skip { position: absolute; left: -999px; } .skip:focus { left: var(--gutter); top: .6rem; z-index: 10000; background: var(--ink); color: var(--paper); padding: .4rem .7rem; font: 600 .8rem/1 var(--mono); border-radius: 3px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== MODE SHIFT — the "flip" flicker (Silent-Hill nod, no references) ========================================================================== */ #shift { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px), radial-gradient(circle at 50% 45%, rgba(193,72,28,.5), rgba(0,0,0,.9) 70%); } html.shifting #shift { animation: flick .7s steps(1,end) both; } @keyframes flick { 0%{opacity:0} 8%{opacity:.9} 16%{opacity:.05} 26%{opacity:.85} 38%{opacity:.1} 52%{opacity:.7} 70%{opacity:.15} 100%{opacity:0} } @media (prefers-reduced-motion: reduce) { body, body::before, body::after { transition: none; } html.shifting #shift { animation: none; } .tell, .mask__real { animation: none !important; } } /* ========================================================================== THE CONTROL — editorial, not a gadget. GLANCE · TRUTH. Deliberately unexplained: a lens that opens. ========================================================================== */ .glance { --w: 2.7rem; display: inline-flex; align-items: center; gap: .55rem; border: 0; background: none; padding: .2rem 0; cursor: pointer; user-select: none; font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: color .3s; } .glance:hover { color: var(--ink); } /* an actual switch — the affordance does the explaining */ .glance__lens { position: relative; flex: none; width: var(--w); height: 1.18rem; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--rule-bold); box-shadow: inset 0 1px 2px rgba(0,0,0,.12); transition: background .4s, border-color .4s; } .glance__lens::after { content: ""; position: absolute; top: 50%; left: .17rem; transform: translateY(-50%); width: .78rem; height: .78rem; border-radius: 50%; background: var(--accent); box-shadow: var(--shadow-sm); transition: left .35s cubic-bezier(.5,.05,.3,1.4), background .4s; } :root[data-mode="real"] .glance { color: var(--accent); } :root[data-mode="real"] .glance__lens { background: #050403; border-color: #40241a; } :root[data-mode="real"] .glance__lens::after { left: calc(var(--w) - .95rem); } /* Portrait exhibit — a figure whose subject changes with the layer */ .portrait { margin: 1.6rem 0 2rem; } .portrait__frame { aspect-ratio: 1311 / 1200; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); } .portrait__frame img { width: 100%; height: 100%; object-fit: cover; } .portrait__frame--square { aspect-ratio: 1 / 1; } /* split-diptych halves: exact source ratio so object-fit never trims a caption */ .portrait__frame--diptych { aspect-ratio: 755 / 795; } .portrait__frame--diptych-tall { aspect-ratio: 20 / 23; } /* 1000 x 1150 agent split */ .portrait figcaption { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-top: .7rem; } /* ========================================================================== THE REVEAL — the surface stays exactly as it was; a line is added under it. Continuity is the point: same claim, new meaning. ========================================================================== */ .tell { display: none; color: var(--tell); margin-top: .15rem; } :root[data-mode="real"] .tell { display: block; animation: bleed .3s ease both; } @media (hover: hover) { .claim:hover .tell, .note:hover .tell, .entry:hover .tell { display: block; animation: bleed .25s ease both; } } .claim:focus-within .tell, .note:focus-within .tell, .entry:focus-within .tell { display: block; } .peek .tell { display: block; } /* touch: press and hold */ /* ========================================================================== THE REDLINE — someone printed the announcement and wrote in the margins. .ins an inline note that only exists under the surface .cut wording the note is challenging: struck through, never deleted Both leave the Brochure sentence completely intact. ========================================================================== */ .ins { display: none; } :root[data-mode="real"] .ins { display: inline; color: var(--tell); animation: bleed .3s ease both; } :root[data-mode="real"] .cut { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--tell); text-decoration-thickness: 2px; } /* NB: a strike is invisible to screen readers and to copied text — only use .cut where the sentence still reads correctly without it. */ @media (prefers-reduced-motion: reduce) { .ins { animation: none !important; } } /* IAM WHO I AM — the shadow agent's tautological answer to "who issued you?". Real-mode only; a vivid stamp red, deliberately hotter than the ember --tell so it reads as graffiti on the page rather than another margin note. */ .iam { display: none; } :root[data-mode="real"] .iam { display: block; margin: .55rem 0 .1rem; font-weight: 800; font-size: 1.12em; letter-spacing: .05em; line-height: 1.1; color: #ff2b2b; text-shadow: 0 0 10px rgba(255, 43, 43, .28); animation: bleed .3s ease both; } @media (prefers-reduced-motion: reduce) { .iam { animation: none !important; } } .claim .tell, .note .tell { font-size: .97em; } .entry .tell { font-size: .97em; margin-top: .4rem; } /* ========================================================================== MASK — the same slot, written twice. A phrase, a heading or a whole paragraph can be rewritten in the other voice; the facts stay, the reading changes. Pair a .mask__shiny element with a .mask__real sibling. ========================================================================== */ .mask { position: relative; white-space: nowrap; } .mask__real { display: none; color: var(--accent); } :root[data-mode="real"] .mask__shiny { display: none; } :root[data-mode="real"] .mask__real { display: inline; color: inherit; } /* block-level twins — a rewritten paragraph is body copy, not an annotation */ :root[data-mode="real"] p.mask__real, :root[data-mode="real"] h1.mask__real, :root[data-mode="real"] h2.mask__real, :root[data-mode="real"] h3.mask__real, :root[data-mode="real"] ul.mask__real, :root[data-mode="real"] ol.mask__real, :root[data-mode="real"] li.mask__real, :root[data-mode="real"] div.mask__real, :root[data-mode="real"] section.mask__real { display: block; } /* peek (shiny mode): pointer hover or JS-driven hold */ @media (hover: hover) { .mask:hover .mask__shiny { display: none; } .mask:hover .mask__real { display: inline; } } .mask:focus-visible .mask__shiny { display: none; } .mask:focus-visible .mask__real { display: inline; } .mask.peek .mask__shiny { display: none; } .mask.peek .mask__real { display: inline; } .mask__real { animation: bleed .25s ease both; } @keyframes bleed { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } } /* ========================================================================== BUTTONS ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; padding: .8rem 1.15rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .3s; } .btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-bold); } .btn--ghost:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); } /* ========================================================================== MASTHEAD (shared: home + wire) ========================================================================== */ /* The control is the whole point of the site, so the masthead never leaves: it stays at the top of the viewport and takes its palette with it. Bleeds into the gutters so scrolling content cannot show beside it. */ .masthead { position: sticky; top: 0; z-index: 60; background: var(--paper); margin-top: 1.3rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); border-bottom: 2px solid var(--ink); transition: background-color .55s ease; } .masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .7rem; flex-wrap: wrap; } .brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 1.24rem; letter-spacing: .01em; } .brand:hover { text-decoration: none; } .brand__mark { flex: none; color: var(--accent); overflow: visible; } /* ========================================================================== THE MARK, UNDER THE SURFACE — the ECG loses amplitude, then contracts to a point. REALITY only; GLANCE keeps the mark exactly as drawn. Amplitude scales around the baseline (y=12), so the flat lead-in and lead-out never move: only the beat itself dies. ========================================================================== */ :root[data-mode="real"] .brand__mark .ecg { transform-box: fill-box; transform-origin: center; /* the stroke must keep its weight while the amplitude collapses, otherwise the line thins out and the final point never renders */ vector-effect: non-scaling-stroke; animation: flatline 8s cubic-bezier(.4, 0, .5, 1) infinite; } @keyframes flatline { /* 0s — strong beat, full glow */ 0% { transform: scale(1, 1); opacity: 1; filter: drop-shadow(0 0 2.6px rgba(224,88,40,.95)); } /* 1s */ 12.5% { transform: scale(1, .72); opacity: 1; filter: drop-shadow(0 0 2.1px rgba(224,88,40,.8)); } /* 2s */ 25% { transform: scale(1, .5); opacity: .97; filter: drop-shadow(0 0 1.6px rgba(224,88,40,.66)); } /* 3s */ 37.5% { transform: scale(1, .31); opacity: .93; filter: drop-shadow(0 0 1.2px rgba(224,88,40,.52)); } /* 4s — barely a pulse left */ 50% { transform: scale(1, .15); opacity: .88; filter: drop-shadow(0 0 .8px rgba(224,88,40,.4)); } /* 5s — a flat line, still full width */ 62.5% { transform: scale(1, .03); opacity: .84; filter: drop-shadow(0 0 .5px rgba(224,88,40,.28)); } /* 6s — the line draws inward toward its centre */ 75% { transform: scale(.42, .008); opacity: .9; filter: drop-shadow(0 0 1px rgba(224,88,40,.5)); } /* 7s — one point remains */ 87.5% { transform: scale(.02, .004); opacity: 1; filter: drop-shadow(0 0 1.9px rgba(224,88,40,.9)); } /* held steady */ 93% { transform: scale(.02, .004); opacity: 1; filter: drop-shadow(0 0 1.9px rgba(224,88,40,.9)); } /* the point fades, and the beat is simply there again */ 97% { transform: scale(.02, .004); opacity: 0; filter: drop-shadow(0 0 1.9px rgba(224,88,40,.9)); } 97.5% { transform: scale(1, 1); opacity: 0; filter: drop-shadow(0 0 2.6px rgba(224,88,40,.95)); } 100% { transform: scale(1, 1); opacity: 1; filter: drop-shadow(0 0 2.6px rgba(224,88,40,.95)); } } /* Reduced motion: the endpoint, without the dying. */ @media (prefers-reduced-motion: reduce) { :root[data-mode="real"] .brand__mark .ecg { animation: none; transform: scale(.02, .004); filter: drop-shadow(0 0 1.9px rgba(224,88,40,.9)); } } .brand em { color: var(--accent); font-style: normal; } .masthead__nav { display: inline-flex; align-items: center; gap: 1rem; font: .72rem/1 var(--mono); letter-spacing: .04em; } .masthead__nav a { color: var(--muted); } .masthead__nav a:hover { color: var(--accent); } .masthead__date { color: var(--faint); } .masthead__strap { font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--rule); padding: .45rem 0; } /* ========================================================================== ATTENTION CUE — a note somebody pencilled onto the interface. Only on the untouched surface, only until the control is used, once per session. Decorative: aria-hidden, never interactive, never in the layout. ========================================================================== */ .masthead__nav { position: relative; } .cue { /* right offset ≈ half the control, so the arrow lands on the switch itself (the control is always the last item in the nav, so this holds per page) */ position: absolute; top: calc(100% + .8rem); right: 3.1rem; display: none; align-items: center; gap: .28rem; pointer-events: none; white-space: nowrap; color: #c8402c; transform: rotate(-1.8deg); transform-origin: 100% 0; animation: cue-breathe 11s ease-in-out 1.6s infinite; } /* absent data-mode (no JS) counts as the untouched surface */ :root:not([data-mode="real"]):not(.cue-seen) .cue { display: inline-flex; } /* the masthead follows the reader; the note does not */ :root.scrolled .cue { display: none !important; } .cue svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .cue__text { font-family: "Bradley Hand", "Segoe Print", "Ink Free", "Marker Felt", "Chalkboard SE", cursive; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; animation: cue-wobble 13s ease-in-out infinite; } .cue__mark { width: .72rem; height: .72rem; flex: none; margin-right: .1rem; animation: cue-scribble 7.3s steps(1, end) 2.6s infinite; } .cue__arrow { width: 3.4rem; height: 2rem; flex: none; margin-top: -1.15rem; } .cue__hash { animation: cue-scribble 9.1s steps(1, end) 4.4s infinite; } /* irregular on purpose — it should never read as a UI element */ @keyframes cue-breathe { 0%, 6% { opacity: 0; } 10% { opacity: .92; } 14% { opacity: .5; } 19% { opacity: .95; } 31% { opacity: .78; } 37% { opacity: .1; } 43% { opacity: .72; } 56% { opacity: .8; } 62% { opacity: .16; } 69% { opacity: .88; } 79% { opacity: .35; } 87%, 100% { opacity: 0; } } @keyframes cue-scribble { 0%, 54% { opacity: 0; } 57%, 73% { opacity: 1; } 76%, 100% { opacity: 0; } } @keyframes cue-wobble { 0%, 100% { transform: rotate(0deg); } 34% { transform: rotate(.55deg); } 67% { transform: rotate(-.6deg); } } @media (prefers-reduced-motion: reduce) { .cue, .cue__text, .cue__mark, .cue__hash { animation: none; opacity: .85; transform: none; } } /* a narrow masthead leaves less margin to write in — the note gets smaller, the crossed-out false start is dropped, the aim stays on the control */ @media (max-width: 30rem) { .cue { right: 2.9rem; gap: .2rem; } .cue__text { font-size: .6rem; } .cue__arrow { width: 2.5rem; height: 1.6rem; margin-top: -.85rem; } .cue__mark { display: none; } } @media (max-width: 20rem) { .cue { display: none !important; } } /* Breadcrumbs -------------------------------------------------------------- */ .crumbs { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 1.6rem 0 0; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--accent); } .crumbs .sep { color: var(--rule-bold); margin: 0 .45em; } .crumbs span[aria-current] { color: var(--ink-soft); } /* Kicker / dateline -------------------------------------------------------- */ .kicker { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); padding-bottom: .35rem; border-bottom: 2px solid var(--accent); margin: 2.2rem 0 .9rem; } /* ========================================================================== HOMEPAGE ========================================================================== */ .hero { padding: 2.4rem 0 1rem; } .hero__eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; } .hero__eyebrow b { color: var(--accent); } .hero h1 { font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 1rem; font-weight: 700; } .hero__sub { font-size: 1.28rem; color: var(--ink-soft); margin: 0 0 1.6rem; max-width: 34rem; } .hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center; } /* the face that rots when you flip to REAL */ .faces { position: relative; margin: 2rem 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--rule); } .faces img { display: block; width: 100%; height: auto; } .faces__cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 1.4rem 1rem .9rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); } .faces__shiny, .faces__real { grid-area: 1 / 1; } .faces { display: grid; } :root[data-mode="real"] .faces__shiny { visibility: hidden; } :root:not([data-mode="real"]) .faces__real { visibility: hidden; } /* Exhibits — lit documents, consistent in both modes (papers under a desk lamp when the lights go out). */ .faces.triangle, .faces.artifact__frame { background: #f4f1ea; padding: clamp(.5rem, 2.4vw, 1.3rem); } .faces.triangle img, .faces.artifact__frame img { border-radius: 6px; } :root[data-mode="real"] .faces.triangle, :root[data-mode="real"] .faces.artifact__frame { background: #e7e2d7; box-shadow: 0 0 0 1px #000, 0 24px 50px rgba(0,0,0,.7); filter: brightness(.96) saturate(.92); } /* ========================================================================== THE CISO MANIFESTO — a document, not a feature list ========================================================================== */ .head--stmt { font-size: clamp(1.3rem, 4vw, 1.75rem); line-height: 1.3; max-width: 34rem; } .manifesto { list-style: none; margin: 1.7rem 0 0; padding: 0; } .manifesto li { padding: .9rem 0; border-top: 1px solid var(--rule); font-size: 1.1rem; line-height: 1.45; } .manifesto li:first-child { border-top: 0; } .manifesto .tell { font-size: .93em; } /* found artifact */ .artifact { margin: 2.2rem 0 0; } .artifact__meta { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 .6rem; } .artifact__frame { aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden; } .artifact__frame img { width: 100%; height: 100%; object-fit: cover; } .artifact figcaption { margin-top: .8rem; color: var(--muted); font-size: 1rem; } /* section rhythm */ .section { padding: 2.6rem 0; border-top: 1px solid var(--rule); } .section__lead { font-size: 1.05rem; color: var(--muted); max-width: 34rem; } h2.head { font-size: clamp(1.6rem, 5vw, 2.2rem); line-height: 1.14; letter-spacing: -.015em; margin: .2rem 0 1rem; } /* challenge / claim grid */ .claims { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .1rem; grid-template-columns: 1fr; } .claim { display: flex; gap: .8rem; align-items: baseline; padding: .95rem 0; border-top: 1px solid var(--rule); } .claim__no { font-family: var(--mono); font-size: .72rem; color: var(--accent); flex: none; padding-top:.2rem; } .claim__body { margin: 0; } .claim__body .mask { white-space: normal; } /* ========================================================================== TRIANGLE — Success (shiny) ⇄ Sadness (real) ========================================================================== */ .triangle { margin: 1.8rem 0 0; } .triangle__emblem { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 30rem; } .triangle__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.6rem 0 0; } .tside__h { font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 2px solid currentColor; } .tside--a .tside__h { color: var(--tri-a); } .tside--b .tside__h { color: var(--tri-b); } .tside--c .tside__h { color: var(--tri-c); } .tside ul { list-style: none; margin: 0; padding: 0; font-size: .98rem; } .tside li { padding: .28rem 0; color: var(--ink-soft); border-bottom: 1px dotted var(--rule); } /* dual content: success traits (shiny) vs pains (real) */ .list--real { display: none; } :root[data-mode="real"] .list--shiny { display: none; } :root[data-mode="real"] .list--real { display: block; } /* emblem face swap */ .face-frown { display: none; } :root[data-mode="real"] .face-smile { display: none; } :root[data-mode="real"] .face-frown { display: inline; } .result { margin: 1.8rem 0 0; padding: 1rem 1.2rem; border-radius: 10px; background: var(--panel); border: 1px solid var(--rule-bold); box-shadow: var(--shadow-sm); font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; } .result b { color: var(--face); font-size: 1rem; } /* persona / field-note cards (the humans behind the memes) */ .notes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1.6rem 0 0; } .note { background: var(--panel); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); } .note__q { font-size: 1.12rem; margin: 0 0 .6rem; } .note__who { font-family: var(--mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0; } .note__who b { color: var(--accent); } /* big pull-quote */ .pull { border-left: 3px solid var(--accent); background: var(--paper-2); padding: 1.2rem 1.4rem; margin: 2rem 0; border-radius: 0 10px 10px 0; box-shadow: var(--shadow-sm); } .pull p { margin: .3rem 0; } /* ========================================================================== CYBER WIRE (news) — unchanged structure, now mode-aware via tokens ========================================================================== */ .lede { font-size: 1.05rem; color: var(--muted); margin: 1rem 0 0; } .ledger { margin: 1.4rem 0 0; } .entry { padding: 1.5rem 0; border-top: 1px solid var(--rule); } .entry:first-child { border-top: 0; } .entry__date { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; color: var(--faint); display: flex; gap: .6em; align-items: center; letter-spacing: .05em; } .entry__date .cat { color: var(--accent); } .entry__title { font-size: 1.5rem; line-height: 1.22; margin: .5rem 0 .35rem; letter-spacing: -.01em; } .entry__title a { color: var(--ink); } .entry__title a:hover { color: var(--accent); text-decoration: none; } .entry__dek { margin: 0; color: var(--ink-soft); } .entry__more { font-family: var(--mono); font-size: .7rem; letter-spacing: .04em; margin-top: .55rem; display: inline-block; } .article { margin-top: .4rem; } .article h1 { font-size: clamp(1.9rem, 6vw, 2.6rem); line-height: 1.12; letter-spacing: -.015em; margin: .3rem 0 .8rem; } .dateline { font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--muted); text-transform: uppercase; margin-bottom: 1.4rem; } .dateline b { color: var(--accent); font-weight: 700; } .article h2 { font-size: 1.42rem; line-height: 1.25; letter-spacing: -.01em; margin: 2.4rem 0 .2rem; } .article p { margin: 1rem 0; } .article strong { color: var(--ink); } .lead { font-size: 1.32rem; line-height: 1.45; color: var(--ink); margin: 0 0 1.4rem; } .lead::first-letter { initial-letter: 2; -webkit-initial-letter: 2; color: var(--accent); font-weight: 700; margin-right: .06em; } .article ul { margin: 1rem 0; padding-left: 0; list-style: none; } .article li { position: relative; padding-left: 1.5rem; margin: .5rem 0; } .article li::before { content: ""; position: absolute; left: .1rem; top: .72em; width: .5rem; height: .5rem; background: var(--accent); transform: rotate(45deg); } .counter { display: inline-flex; align-items: baseline; gap: .5em; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 1px solid var(--rule-bold); border-left: 3px solid var(--accent); padding: .5rem .7rem; margin: 0 0 1.5rem; border-radius: 0 6px 6px 0; } .counter b { font-size: 1.15rem; color: var(--accent); font-weight: 700; } .counter .live { color: var(--accent); font-size: .62rem; } .counter .live::before { content: ""; display: inline-block; width: .45em; height: .45em; border-radius: 50%; background: var(--accent); margin-right: .4em; animation: pulse 2.2s ease-in-out infinite; } [data-elapsed] .live { display: none; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .counter .live::before { animation: none; } } .brief { border-left: 3px solid var(--accent); background: var(--panel); padding: 1.1rem 1.3rem; margin: 2rem 0; border-radius: 0 8px 8px 0; } .brief .kicker { margin-top: 0; } .brief p:last-child { margin-bottom: 0; } /* Footer / colophon -------------------------------------------------------- */ .backlink { display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; margin: 2.6rem 0 0; } .source { font-family: var(--mono); font-size: .72rem; letter-spacing: .03em; color: var(--muted); margin: 1.6rem 0 0; } .source b { color: var(--ink-soft); font-weight: 700; } .punch { font-size: 1.24rem; line-height: 1.5; color: var(--ink); margin: .2rem 0; } .punch b { color: var(--accent); } /* mini triangle locator — anchors a dispatch to a side of the CISO triangle */ .tri-anchor { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.5rem; } .tri-loc { width: 34px; height: 31px; flex: none; } .tri-loc polygon { fill: var(--rule-bold); stroke: var(--paper); stroke-width: 1.2; transition: fill .4s; } .tri-loc.lit-people .s-people { fill: var(--tri-a); } .tri-loc.lit-process .s-process { fill: var(--tri-b); } .tri-loc.lit-tech .s-tech { fill: var(--tri-c); } .tri-anchor__label { font-family: var(--mono); font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .tri-anchor__label b { color: var(--ink-soft); font-weight: 700; } .foot { margin: 2.6rem 0 3rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); } .tags { font-family: var(--mono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 0 0 .6rem; } .tags .tag { color: var(--muted); } .colophon { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 0; } @media (max-width: 34rem) { .triangle__grid { grid-template-columns: 1fr; } } /* Print -------------------------------------------------------------------- */ @media print { :root { --paper:#fff; --ink:#000; --muted:#333; --accent:#000; --grain:0; --vig:0; } .mode-toggle, .masthead__nav, .backlink, .counter .live, #shift { display: none; } body::before, body::after { display: none; } a { color: #000; text-decoration: underline; } }