/* ========================================================================== Theme: Aurora -------------------------------------------------------------------------- The continuity option. Aytict's purple stays the brand colour and the falling-hexagon canvas stays on, but both stop competing with the words. What actually changes, and why: - The magenta is pulled back from #FF00FF to a fuchsia that has somewhere left to go. Pure #FF00FF is already at maximum saturation, so hover and active states had nothing brighter to move to and every element shouted at the same volume. - Cards get an opaque surface. They were rgba(125,0,125,0.3) over an animated canvas, so body text sat directly on moving hexagons. - Headings were #AAAAAA - mid grey on a dark purple ground, around 3:1. They are near-white here, comfortably past WCAG AA. - The viewport-height grid (.main, 20%/50%/30% rows with an inner scrollbar) is gone; the page is as tall as its content. Layered on top of style.css, never instead of it: style.css still owns the docs area, the sign-in page and the admin app, and this file only restyles the public chrome. See ../../private/theme.php. No webfont anywhere in here on purpose. The site's CSP sends style-src 'self' https://cdn.jsdelivr.net https://cdnjs.cloudflare.com with no Google Fonts entry, so an @import from fonts.googleapis.com would be refused by the browser and the page would silently fall back to the system stack anyway. It uses that stack deliberately instead. ========================================================================== */ :root { --ayt-bg: #0a0611; --ayt-bg-deep: #06040c; --ayt-surface: #150d23; --ayt-surface-2: #1d1230; --ayt-border: rgba(224, 168, 255, 0.16); --ayt-border-strong: rgba(224, 168, 255, 0.32); --ayt-text: #f4f0f8; --ayt-text-muted: #b6a8c9; --ayt-text-faint: #8a7b9e; --ayt-accent: #c94bea; --ayt-accent-soft: #e79dfa; --ayt-accent-deep: #8b23ad; --ayt-shell: 1140px; --ayt-radius: 14px; --ayt-radius-sm: 9px; --ayt-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --ayt-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --ayt-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9); /* Chrome tokens. css/chrome.css styles the sign-in page and the admin area once, in terms of these, so those two pages do not need a copy of themselves in each of the three theme files. Everything a theme needs to say about them, it says here. */ --ayt-rain-opacity: 0.42; --ayt-icon: #f4f0f8; --ayt-overlay: rgba(6, 4, 12, 0.72); --ayt-input-bg: rgba(0, 0, 0, 0.32); --ayt-ok: #4ad08a; --ayt-ok-bg: rgba(20, 90, 55, 0.5); --ayt-warn: #f0c04a; --ayt-warn-bg: rgba(110, 80, 0, 0.45); --ayt-danger: #ff6b6b; --ayt-danger-bg: rgba(120, 20, 20, 0.55); --ayt-danger-text: #ffd9d9; --ayt-badge-ink: #1a001a; } /* --- Base --------------------------------------------------------------- */ /* style.css sets html to width:100vw;height:100vh and body to a centred 95% box. 100vw includes the scrollbar gutter, which is a horizontal scrollbar on every desktop browser; the fixed height is what forced the old inner scroll pane. Both are undone here. */ html { width: 100%; height: auto; min-height: 100%; background-color: var(--ayt-bg); -webkit-text-size-adjust: 100%; } body.page-home { margin: 0; width: 100%; height: auto; min-height: 100vh; padding: 0; font-family: var(--ayt-font); font-size: 17px; line-height: 1.65; color: var(--ayt-text); /* Deliberately transparent, with the page colour set on above. The hexagon canvas is position:fixed;z-index:-1, and per CSS painting order a negative-z-index element paints after the root background but *before* any in-flow block background - so giving an opaque colour here would cover the animation completely. */ background-color: transparent; overflow-x: hidden; } .page-home p { color: var(--ayt-text-muted); } .page-home a { color: var(--ayt-accent-soft); text-decoration: none; } .page-home a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .page-home :focus-visible { outline: 2px solid var(--ayt-accent-soft); outline-offset: 3px; border-radius: 4px; } .page-home img { max-width: 100%; } /* One measure for the whole page. Body copy used to run the full width of the window - about 150 characters a line at 1440px, roughly twice the length the eye tracks comfortably. */ .shell { width: 100%; max-width: var(--ayt-shell); margin-inline: auto; padding-inline: 24px; box-sizing: border-box; } .site { display: flex; flex-direction: column; min-height: 100vh; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .page-home .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1200; padding: 10px 18px; background: var(--ayt-accent); color: #fff; border-radius: 0 0 var(--ayt-radius-sm) 0; } .page-home .skip-link:focus { left: 0; } /* --- Header ------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 900; background: rgba(10, 6, 17, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--ayt-border); } .site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; /* The hamburger is fixed at top-left and the language switcher at top-right; both overlap this bar, so it is inset to clear them. */ padding-block: 14px; padding-left: 76px; padding-right: 104px; } .page-home .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ayt-text); text-decoration: none; flex-shrink: 0; } .page-home .brand:hover { text-decoration: none; color: var(--ayt-text); } .brand-mark { width: 40px; height: 40px; filter: drop-shadow(0 0 12px rgba(201, 75, 234, 0.55)); } .brand-name { font-size: 21px; font-weight: 650; letter-spacing: 0.02em; } .brand-dot { color: var(--ayt-accent); } .site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .page-home .site-nav-link { padding: 9px 15px; border-radius: var(--ayt-radius-sm); font-size: 15px; font-weight: 500; color: var(--ayt-text-muted); text-decoration: none; white-space: nowrap; transition: color 0.18s ease, background-color 0.18s ease; } .page-home .site-nav-link:hover { color: var(--ayt-text); background: rgba(201, 75, 234, 0.14); text-decoration: none; } .page-home .site-nav-cta { color: #fff; background: linear-gradient(135deg, var(--ayt-accent), var(--ayt-accent-deep)); box-shadow: 0 6px 18px -8px rgba(201, 75, 234, 0.9); } .page-home .site-nav-cta:hover { background: linear-gradient(135deg, var(--ayt-accent-soft), var(--ayt-accent)); } /* --- Hero --------------------------------------------------------------- */ .site-main { flex: 1 0 auto; } .hero { position: relative; padding-block: clamp(56px, 9vw, 108px) clamp(36px, 5vw, 64px); } /* A pool of brand light behind the headline, so the hero has a focal point without another bordered box around it. */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 70% at 18% 8%, rgba(201, 75, 234, 0.22), transparent 62%), radial-gradient(48% 62% at 88% 22%, rgba(91, 60, 220, 0.18), transparent 66%); pointer-events: none; } .hero-inner { position: relative; max-width: 820px; } .hero-eyebrow { margin: 0 0 18px; font-family: var(--ayt-mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ayt-accent-soft) !important; } .hero-title { margin: 0 0 22px; font-size: clamp(2.3rem, 5.4vw, 4rem); line-height: 1.06; letter-spacing: -0.028em; font-weight: 700; color: var(--ayt-text); text-wrap: balance; } .hero-lead { margin: 0 0 34px; max-width: 62ch; font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.6; color: var(--ayt-text-muted) !important; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; } .page-home .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 26px; border-radius: var(--ayt-radius-sm); font-size: 16px; font-weight: 600; text-decoration: none; border: 1px solid transparent; transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; } .page-home .btn:hover { text-decoration: none; transform: translateY(-2px); } .page-home .btn-primary { color: #fff; background: linear-gradient(135deg, var(--ayt-accent), var(--ayt-accent-deep)); box-shadow: 0 14px 30px -14px rgba(201, 75, 234, 0.95); } .page-home .btn-primary:hover { color: #fff; box-shadow: 0 18px 38px -14px rgba(201, 75, 234, 1); } .page-home .btn-ghost { color: var(--ayt-text); background: rgba(255, 255, 255, 0.04); border-color: var(--ayt-border-strong); } .page-home .btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.09); } /* --- Sections ----------------------------------------------------------- */ .section-title { margin: 0 0 34px; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 650; letter-spacing: -0.02em; color: var(--ayt-text); } .services { padding-block: clamp(40px, 6vw, 72px); } .service-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; } .service-card { position: relative; display: flex; flex-direction: column; padding: 28px 26px 24px; border: 1px solid var(--ayt-border); border-radius: var(--ayt-radius); background: linear-gradient(170deg, var(--ayt-surface-2), var(--ayt-surface)); box-shadow: var(--ayt-shadow); overflow: hidden; transition: transform 0.2s ease, border-color 0.2s ease; } .service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--ayt-accent), transparent); opacity: 0.65; } .service-card:hover { transform: translateY(-4px); border-color: var(--ayt-border-strong); } .service-index { font-family: var(--ayt-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--ayt-accent); } .service-title { margin: 14px 0 10px; font-size: 1.12rem; font-weight: 640; line-height: 1.3; color: var(--ayt-text); } .service-body { margin: 0 0 18px; font-size: 0.96rem; color: var(--ayt-text-muted) !important; flex: 1 0 auto; } .page-home .service-link { font-size: 0.92rem; font-weight: 600; color: var(--ayt-accent-soft); } .page-home .service-link::after { content: " →"; transition: none; } /* --- Latest posts ------------------------------------------------------- */ .posts { padding-block: clamp(32px, 5vw, 60px); } .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; } .post-item { padding: 26px 24px; border: 1px solid var(--ayt-border); border-radius: var(--ayt-radius); background: var(--ayt-surface); box-shadow: var(--ayt-shadow); } .post-date { margin: 0 0 8px; font-family: var(--ayt-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ayt-text-faint) !important; } .post-title { margin: 0 0 12px; font-size: 1.1rem; font-weight: 640; color: var(--ayt-text); } .post-content { font-size: 0.96rem; } .post-content p { color: var(--ayt-text-muted); } /* --- Document section --------------------------------------------------- */ .doc-section { padding-block: clamp(32px, 5vw, 60px) clamp(56px, 8vw, 96px); } /* style.css styles .doc-nav-link as a magenta pill. Same selectors, later in the cascade, so these win without needing !important. */ .page-home .doc-nav { gap: 10px; margin-bottom: 26px; border-bottom: 1px solid var(--ayt-border); padding-bottom: 14px; } .page-home .doc-nav-link { padding: 9px 17px; border-radius: 999px; border: 1px solid var(--ayt-border); background: rgba(255, 255, 255, 0.035); color: var(--ayt-text-muted); font-size: 14.5px; font-weight: 500; } .page-home .doc-nav-link:hover { border-color: var(--ayt-border-strong); background: rgba(201, 75, 234, 0.14); color: var(--ayt-text); } .page-home .doc-nav-link.active { background: linear-gradient(135deg, var(--ayt-accent), var(--ayt-accent-deep)); border-color: transparent; color: #fff; font-weight: 600; } .doc-body { padding: 34px 34px 28px; border: 1px solid var(--ayt-border); border-radius: var(--ayt-radius); background: var(--ayt-surface); box-shadow: var(--ayt-shadow); } /* The readability fix. style.css sets #about_us headings to #AAAAAA, which against this background is roughly 3:1 - under the 4.5:1 that WCAG AA asks of body text, and these are headings people are meant to scan. */ .page-home #about_us h1, .page-home #about_us h2, .page-home #about_us h3, .page-home #about_us h4, .page-home #about_us h5, .page-home #about_us h6 { color: var(--ayt-text); letter-spacing: -0.018em; line-height: 1.25; } .page-home #about_us h1 { margin: 0 0 18px; font-size: clamp(1.75rem, 3.2vw, 2.4rem); padding-bottom: 16px; border-bottom: 1px solid var(--ayt-border); } .page-home #about_us h2 { margin: 38px 0 14px; font-size: 1.5rem; } .page-home #about_us h3 { margin: 28px 0 10px; font-size: 1.16rem; color: var(--ayt-accent-soft); } .page-home #about_us p, .page-home #about_us li, .page-home #about_us td, .page-home #about_us th, .page-home #about_us blockquote { color: var(--ayt-text-muted); } .page-home #about_us p, .page-home #about_us li { max-width: 72ch; } .page-home #about_us strong { color: var(--ayt-text); } .page-home #about_us blockquote { margin: 20px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ayt-accent); } /* --- Footer ------------------------------------------------------------- */ .site-footer { margin-top: auto; border-top: 1px solid var(--ayt-border); background: var(--ayt-bg-deep); padding-top: 52px; } .site-footer-inner { display: grid; /* Was three fixed equal columns at every width, which is what broke the e-mail address across three lines on a phone. */ grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 36px 28px; padding-bottom: 44px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand .brand-name { font-size: 18px; } .footer-tagline { margin: 0; max-width: 34ch; font-size: 0.93rem; color: var(--ayt-text-faint) !important; } .footer-heading { margin: 0 0 14px; font-family: var(--ayt-mono); font-size: 11.5px; letter-spacing: 0.15em; text-transform: uppercase; font-weight: 600; color: var(--ayt-text-faint); } .footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; } .footer-list a { color: var(--ayt-text-muted); text-decoration: none; /* The address is long and the column is narrow; break it at a sensible point rather than mid-word. */ overflow-wrap: anywhere; } .footer-list a:hover { color: var(--ayt-text); text-decoration: underline; text-underline-offset: 3px; } .footer-name { color: var(--ayt-text); font-weight: 600; } .footer-social a { display: inline-flex; align-items: center; gap: 9px; } .social-icon { width: 20px; height: 20px; border-radius: 4px; opacity: 0.85; } .footer-legal { border-top: 1px solid var(--ayt-border); padding-block: 20px 26px; } .footer-legal p { margin: 0; font-size: 0.86rem; color: var(--ayt-text-faint) !important; } /* --- Responsive --------------------------------------------------------- */ @media (max-width: 900px) { .site-footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { body.page-home { font-size: 16px; } .shell { padding-inline: 18px; } /* Below this width the masthead nav and the fixed hamburger and language switcher cannot share a row without overlapping - which is what the old header did. The side menu already carries every one of these links, so the inline nav stands down and the hamburger takes over. */ .site-nav { display: none; } .site-header-inner { justify-content: center; padding-left: 68px; padding-right: 96px; } .doc-body { padding: 22px 20px; } .service-card { padding: 24px 22px 20px; } } @media (max-width: 460px) { .site-footer-inner { grid-template-columns: 1fr; gap: 28px; } .brand-name { font-size: 18px; } } @media (prefers-reduced-motion: reduce) { .page-home * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } .page-home .btn:hover, .page-home .service-card:hover { transform: none; } }