/* ========================================================================== AMAR BUILDS: retro terminal edition (styles.css) CONTENTS 1. Theme colors (GREEN, AMBER and LIGHT live here. Change colors in this section.) 2. Base and reset 3. Shared pieces (cursor, buttons, cards, terminal windows, numbered lists) 4. Navigation and the two toggles 5. Hero 6. Sections (how it works, portfolio, services, compare, resources, testimonials, form, footer) 7. Responsive layout 8. Scroll fade-in 9. Reduced motion and high contrast HOW THEMING WORKS The tag carries data-theme="green", "amber" or "light". Every color in this file comes from the variables below, so switching the attribute recolors the whole site. Nothing else needs to change. The two dark themes only set a few colors. The shared block sets sensible dark defaults for everything else (nav, title bars, hover fills...), and the LIGHT block overrides them for paper. ========================================================================== */ /* ========================================================================== 1. THEME COLORS ========================================================================== */ /* GREEN: terminal green (the default) */ :root, [data-theme="green"] { --bg: #0a0a0a; --card: #0f0f0f; --accent: #00ff41; /* headings, borders, buttons */ --accent-2: #003b00; /* secondary accent: title bars, hover fills */ --accent-rgb: 0, 255, 65; /* same as --accent, as numbers, for see-through versions */ --hotkey: #6dff8f; /* slightly brighter green: the underlined shortcut letters */ } /* AMBER: warm vintage */ [data-theme="amber"] { --bg: #0a0805; --card: #0f0d0a; --accent: #ffb000; --accent-2: #3d2a00; --accent-rgb: 255, 176, 0; --hotkey: #ffcf5c; /* slightly brighter amber: shortcut letters */ } /* Colors shared by the dark themes (green and amber), plus see-through versions built from the accent. The LIGHT theme below overrides the ones it needs to. */ :root { --text: #cccccc; /* body text */ --muted: #9a9a9a; /* secondary text (gray) */ --error: #ff6b6b; /* invalid form fields */ --border: rgba(var(--accent-rgb), 0.3); /* card borders: accent at 30% */ --field-border: rgba(var(--accent-rgb), 0.65);/* form fields need a stronger border (see accessibility notes) */ --glow: rgba(var(--accent-rgb), 0.35); /* hover glow */ /* Roles that differ between dark and light. Dark themes reuse the accent colors. */ --heading: var(--accent); /* h1, h2, h3 */ --heading-glow: 0 0 18px rgba(var(--accent-rgb), 0.35); /* faint phosphor glow on the hero heading */ --nav-bg: var(--bg); /* header and mobile menu */ --nav-border: var(--accent); /* line under the header */ --bar-bg: var(--accent-2); /* title bars, hint bar, highlighted table row */ --bar-text: var(--accent); /* text on those bars */ --tint: var(--accent-2); /* hover and selected fills */ --btn-hover-bg: var(--accent-2); /* outline button on hover */ --btn-hover-text: var(--accent); --field-bg: var(--bg); /* form inputs */ --field-text: #f2f2f2; --scan: rgba(255, 255, 255, 0.03); /* hero scanlines */ --dots-opacity: 0.16; /* dot grid strength */ --section-alt-bg: transparent; /* background of the dot grid sections */ --card-on-alt: var(--card); /* cards that sit inside the dot grid sections */ /* Fonts */ --mono: "Space Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Layout. --header-h is the nav plus the hotkey hint bar (desktop only, see section 4). */ --nav-h: 4rem; --hint-h: 0rem; --header-h: calc(var(--nav-h) + var(--hint-h)); --max-w: 72rem; /* The 0.3 second color fade used everywhere, so both toggles feel smooth */ --fade: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, text-shadow 0.3s ease, outline-color 0.3s ease; /* Blink speed and count. Change "infinite" to a number (like 10) to stop the blinking after that many seconds. */ --blink-count: infinite; color-scheme: dark; /* dark scrollbars and form controls */ } /* LIGHT: vintage paper meets retro terminal, like an old printed manual. Contrast checked against WCAG AA (4.5:1 for text, 3:1 for field borders): green #1a6b1a on paper is 5.9:1 (5.4:1 on the darker paper), body text 9.7:1, headings 15.4:1, muted text 5.4:1, paper text on the dark green bars 11:1. If you change a color here, re-check it. */ [data-theme="light"] { --bg: #f5f0e8; /* aged paper */ --card: #ede8dc; /* slightly darker paper: cards, alternating sections, nav */ --accent: #1a6b1a; /* deep terminal green */ --accent-2: #0d3d0d; /* very dark green: title bars and the hint bar */ --accent-rgb: 26, 107, 26; /* same as --accent, as numbers */ --hotkey: #0d3d0d; /* shortcut letters go darker on paper (brighter would vanish) */ --text: #3d3d2e; /* body text: dark warm gray */ --muted: #5e5e4c; /* secondary text (5.4:1 even on the darker paper) */ --error: #a61b1b; --border: rgba(var(--accent-rgb), 0.4); --field-border: rgba(var(--accent-rgb), 0.8); /* strong enough to see a field's edge (3:1) */ --glow: rgba(var(--accent-rgb), 0.25); /* subtle green glow */ --heading: #1a1a0f; /* very dark warm black, not pure black */ --heading-glow: none; /* a glow around dark text just looks smudged */ --nav-bg: #ede8dc; --nav-border: rgba(var(--accent-rgb), 0.6); --bar-bg: #0d3d0d; --bar-text: #f5f0e8; --tint: rgba(var(--accent-rgb), 0.1); /* hover and selected fills */ --btn-hover-bg: #1a6b1a; /* inverted: buttons fill green and the text turns paper colored */ --btn-hover-text: #f5f0e8; --field-bg: #f5f0e8; --field-text: #1a1a0f; --scan: rgba(26, 26, 15, 0.015); --dots-opacity: 0.08; --section-alt-bg: #ede8dc; --card-on-alt: #f5f0e8; /* cards flip to the lighter paper so they stand out on alternating sections */ color-scheme: light; } /* ========================================================================== 2. BASE AND RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; transition: var(--fade); /* smooth 0.3s color changes on everything */ } html { background: var(--bg); scroll-padding-top: calc(var(--header-h) + 1rem); /* anchor links stop below the fixed nav */ -webkit-text-size-adjust: 100%; } /* Smooth scrolling for anchor links, unless the visitor asked for less motion */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* While a saved Spanish preference is being applied (see the head script) */ html.lang-pending body { visibility: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 1rem; line-height: 1.7; } /* Makes the "hidden" attribute always win, even on elements styled with display: flex */ [hidden] { display: none !important; } /* Sections (and
, for the skip link) receive focus when you jump to them. They are not controls, so no outline. */ section[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; } h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } h1, h2, h3 { font-family: var(--mono); font-weight: 700; line-height: 1.2; color: var(--heading); } a { color: var(--accent); text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 2px; } img, svg { max-width: 100%; } ::selection { background: var(--accent); color: var(--bg); } /* ACCESSIBILITY: a clear focus outline on everything a keyboard user can reach */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Text only screen readers can hear */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ACCESSIBILITY: skip link, off screen until it gets keyboard focus */ .skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 300; padding: 0.75rem 1.25rem; background: var(--accent); color: var(--bg); font-family: var(--mono); font-weight: 700; text-decoration: none; } .skip-link:focus { top: 1rem; } .container { width: min(100% - 2rem, var(--max-w)); margin-inline: auto; } .container--narrow { width: min(100% - 2rem, 44rem); } /* ========================================================================== 3. SHARED PIECES ========================================================================== */ /* --- Blinking cursor. One second cycle, in the accent color. ---------- */ .cursor { display: inline-block; color: var(--accent); animation: blink 1s steps(1) var(--blink-count); } @keyframes blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } } /* --- Buttons styled as terminal commands: [ LIKE THIS ] --------------- The brackets are drawn by CSS (::before and ::after). The "/ ''" part gives them empty alt text, so screen readers skip them. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.65rem 1.1rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 0; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.3; text-align: center; text-transform: uppercase; text-decoration: none; cursor: pointer; } .btn::before { content: "[\00a0"; content: "[\00a0" / ""; } .btn::after { content: "\00a0]"; content: "\00a0]" / ""; } /* Hover: the border is already 100%, so add the glow and a fill. Dark themes fill with the dark secondary color. Light fills with green and turns the text paper colored (inverted). */ .btn:hover { background: var(--btn-hover-bg); color: var(--btn-hover-text); box-shadow: 0 0 14px var(--glow); text-decoration: none; } .btn--primary { background: var(--accent); color: var(--bg); } .btn--primary:hover { background: transparent; color: var(--accent); } .btn--small { min-height: 2.5rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; } .btn--block { width: 100%; } /* Placeholder links (aria-disabled="true") look switched off */ .btn[aria-disabled="true"] { color: var(--muted); border-color: var(--border); cursor: not-allowed; } .btn[aria-disabled="true"]:hover { background: transparent; color: var(--muted); box-shadow: none; } /* --- Cards: one pixel border, sharp corners, no resting shadow ------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 0; } /* Hover: border goes to 100% accent and a soft glow appears */ .card:hover, .window:hover { border-color: var(--accent); box-shadow: 0 0 16px var(--glow); } .form.card:hover { border-color: var(--border); box-shadow: none; } .form.card:focus-within { border-color: var(--accent); box-shadow: 0 0 16px var(--glow); } /* --- Terminal window: a title bar plus a body ------------------------- */ .window { background: var(--card); border: 1px solid var(--border); border-radius: 0; } .window--wide { margin-bottom: 2rem; } .window__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.85rem; background: var(--bar-bg); border-bottom: 1px solid var(--border); color: var(--bar-text); font-family: var(--mono); font-size: 0.8rem; } .dots i { display: inline-block; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; border: 1px solid currentColor; } .window__pad { padding: 1.5rem; } /* --- Numbered lists: [01] [02] [03] instead of bullets --------------- Add class="numbered" to a list. The numbers come from a CSS counter. role="list" in the HTML keeps them announced as lists in Safari. */ .numbered { counter-reset: item; } .numbered > li { counter-increment: item; } .numbered > li::before { content: "[" counter(item, decimal-leading-zero) "]"; content: "[" counter(item, decimal-leading-zero) "]" / ""; color: var(--accent); font-family: var(--mono); font-weight: 700; } /* --- "> prompt" headings ---------------------------------------------- */ .prompt-heading, .hero__prompt { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--accent); } .prompt-heading::before, .hero__prompt::before { content: ">\00a0"; content: ">\00a0" / ""; } .lead { max-width: 44rem; margin-top: 1rem; } /* ========================================================================== 4. NAVIGATION AND THE TWO TOGGLES ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); /* single pixel accent line */ } .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: var(--nav-h); } .logo { font-family: var(--mono); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--accent); } /* Desktop layout: links, then toggles, in one row */ .nav-menu { display: flex; align-items: center; gap: 1.5rem; } .nav-links { display: flex; gap: 0.25rem; } .nav-links a { display: block; padding: 0.55rem 0.5rem; color: var(--accent); font-family: var(--mono); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } .nav-links a::before { content: "[\00a0"; content: "[\00a0" / ""; } .nav-links a::after { content: "\00a0]"; content: "\00a0]" / ""; } .nav-links a:hover { background: var(--tint); } .toggles { display: flex; align-items: center; gap: 1rem; } /* A toggle looks like [ GREEN / AMBER / LIGHT ]. The active option is filled in. */ .toggle { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 0.8rem; font-weight: 700; color: var(--accent); } .toggle::before { content: "["; content: "[" / ""; margin-right: 0.35rem; } .toggle::after { content: "]"; content: "]" / ""; margin-left: 0.35rem; } .toggle__sep { opacity: 0.6; } .toggle button { min-height: 2.25rem; padding: 0.35rem 0.55rem; background: transparent; color: var(--accent); border: 0; border-radius: 0; font: inherit; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; } .toggle button:hover { background: var(--tint); } /* Active option: filled, so it is clear without relying on color alone */ .toggle button[aria-pressed="true"] { background: var(--accent); color: var(--bg); } /* Hamburger: hidden on desktop */ .nav-toggle { display: none; } /* Just above the mobile breakpoint the nav is tight, especially in Spanish with three theme options. Trim the spacing a little so it stays on one line. */ @media (min-width: 1024px) and (max-width: 1199px) { .nav-menu { gap: 0.9rem; } .nav-links { gap: 0; } .nav-links a { padding-inline: 0.35rem; } .toggles { gap: 0.6rem; } .toggle button { padding-inline: 0.35rem; } .toggle::before { margin-right: 0.15rem; } .toggle::after { margin-left: 0.15rem; } .toggle-set { gap: 0.25rem; } } /* Below 1024px the links and toggles move into a terminal style dropdown */ @media (max-width: 1023px) { .js .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 0; cursor: pointer; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.2rem; height: 2px; background: currentColor; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* Bars turn into an X while open */ .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* The dropdown panel */ .js .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 1rem 1rem 1.5rem; background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; } .js .nav-menu.is-open { display: flex; } /* A fake command prompt line at the top of the dropdown (decorative) */ .js .nav-menu::before { content: "$ menu"; content: "$ menu" / ""; color: var(--muted); font-family: var(--mono); font-size: 0.85rem; } .nav-links { flex-direction: column; gap: 0; } .nav-links a { min-height: 2.75rem; padding: 0.75rem 0.25rem; font-size: 1rem; border-bottom: 1px dashed var(--border); } /* In the dropdown, links read like "> WORK" instead of "[ WORK ]" */ .nav-links a::before { content: ">\00a0"; content: ">\00a0" / ""; } .nav-links a::after { content: none; } .toggles { flex-wrap: wrap; gap: 1rem 1.5rem; } .toggle button { min-height: 2.75rem; padding: 0.5rem 0.85rem; font-size: 0.9rem; } } /* ========================================================================== 5. HERO ========================================================================== */ .hero { position: relative; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; /* full screen height, phone friendly */ padding: calc(var(--header-h) + 2rem) 0 3rem; overflow: hidden; } /* CRT scanlines: thin horizontal lines at 3% opacity (1.5% on light paper), hero only. pointer-events: none lets clicks pass straight through. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient( to bottom, var(--scan) 0, var(--scan) 1px, transparent 1px, transparent 3px ); } .hero__grid { position: relative; z-index: 1; display: grid; gap: 3rem; grid-template-columns: 1fr; } .hero__prompt { margin-bottom: 1rem; font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; } .hero h1 { font-size: clamp(2rem, 9vw, 4rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; text-shadow: var(--heading-glow); /* faint phosphor glow (dark themes only) */ } .hero h1 .line { display: block; } .hero__lead { max-width: 38rem; margin-top: 1.75rem; font-size: clamp(1.05rem, 1.8vw, 1.2rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } /* Decorative terminal on the right (hidden on small screens) */ .hero__visual { display: none; } .window__body { margin: 0; padding: 1.25rem; overflow-x: auto; color: var(--text); font-family: var(--mono); font-size: 0.9rem; line-height: 1.9; white-space: pre; } .window__body .ok { color: var(--accent); } .window__body .dim { color: var(--muted); } /* ========================================================================== 6. SECTIONS ========================================================================== */ .section { position: relative; padding: 4.5rem 0; } .section > .container { position: relative; z-index: 1; } /* DOT GRID on alternating sections (add class "section--grid"). Drawn with a mask so the dot color can fade smoothly when the theme changes. */ .section--grid::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-color: var(--accent); opacity: var(--dots-opacity); -webkit-mask-image: radial-gradient(circle, #000 1px, transparent 1.6px); mask-image: radial-gradient(circle, #000 1px, transparent 1.6px); -webkit-mask-size: 24px 24px; mask-size: 24px 24px; } .section--grid { background: var(--section-alt-bg); /* light theme: slightly darker paper */ border-block: 1px solid var(--border); } .section--grid .card, .section--grid .window, .section--grid .term-box { background: var(--card-on-alt); } /* Section labels look like terminal commands: < LABEL > */ .section-label { margin-bottom: 2.5rem; font-size: clamp(1.25rem, 3.6vw, 1.75rem); letter-spacing: 0.04em; text-transform: uppercase; } .section-label::before { content: "<\00a0"; content: "<\00a0" / ""; color: var(--accent); } .section-label::after { content: "\00a0>"; content: "\00a0>" / ""; color: var(--accent); } .grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } /* --- How it works ---------------------------------------------------- */ .steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } .step { padding: 1.75rem; } .step::before { display: block; margin-bottom: 0.75rem; font-size: 1.5rem; } .step h3 { margin-bottom: 0.6rem; font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; } /* --- Portfolio ------------------------------------------------------- */ .project { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.75rem; } .project__name { font-size: 1.15rem; letter-spacing: 0.03em; text-transform: uppercase; } .project .btn { margin-top: auto; align-self: flex-start; } .project p + .btn { margin-top: 0.5rem; } /* --- Services and pricing -------------------------------------------- */ /* Each row: [01] NAME ........ $PRICE, then a description underneath */ .price-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); /* minmax(0, ...) lets long text wrap instead of overflowing */ column-gap: 0.9rem; padding: 1.4rem 1.5rem; border-top: 1px solid var(--border); } .price-list > li:first-child { border-top: 0; } .price-list > li::before { grid-row: 1; padding-top: 0.05rem; } .price-list > li > * { grid-column: 2; } /* Add-ons sit inside padding already, so flatten the side padding */ .price-list--flush > li { padding-inline: 0; } .price-list--flush > li:first-child { padding-top: 0.75rem; } .window__pad .prompt-heading { margin-bottom: 0.25rem; } .price-line { display: flex; align-items: baseline; gap: 0.6rem; } .price-name { min-width: 0; font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); } .price-amt { font-family: var(--mono); font-weight: 700; color: var(--accent); white-space: nowrap; } /* The row of dots between name and price (a "leader") */ .leader { flex: 1 1 1rem; min-width: 1rem; border-bottom: 2px dotted rgba(var(--accent-rgb), 0.45); transform: translateY(-0.2em); } .price-list p { max-width: 60ch; margin-top: 0.4rem; } .disclaimer { max-width: 52rem; color: var(--muted); font-size: 0.9rem; } .disclaimer__label { margin-right: 0.35rem; color: var(--accent); font-family: var(--mono); font-weight: 700; text-transform: uppercase; } /* --- Why not Squarespace --------------------------------------------- */ .compare-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.9rem; } .compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .compare-table thead th { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; } .compare-table tbody th { font-weight: 700; color: var(--text); } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; } /* The Amar Builds row is highlighted like a title bar */ .compare-table .is-us th, .compare-table .is-us td { background: var(--bar-bg); color: var(--bar-text); font-weight: 700; } #compare .prompt-heading { margin-top: 2.5rem; margin-bottom: 1rem; } .after-list { display: grid; gap: 1rem; } .after-list > li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; } .after-list > li > * { grid-column: 2; } .after-list > li::before { grid-row: 1; } .after-list__key { color: var(--accent); font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .tagline { margin-top: 3rem; color: var(--accent); font-family: var(--mono); font-size: clamp(1.25rem, 3.8vw, 2rem); font-weight: 700; line-height: 1.25; text-transform: uppercase; } .tagline::before { content: ">\00a0"; content: ">\00a0" / ""; } /* --- Resources ------------------------------------------------------- */ .resources { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } /* --- Testimonials ---------------------------------------------------- */ .testimonial { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.5rem 1.75rem; } .bracket { color: var(--accent); font-family: var(--mono); font-size: 2rem; font-weight: 700; line-height: 1; } .bracket--close { align-self: flex-end; } .testimonial blockquote { padding-inline: 0.5rem; } .testimonial figcaption { display: flex; flex-direction: column; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--border); } .testimonial__name { color: var(--accent); font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .testimonial__biz { color: var(--muted); } /* --- Intake form ----------------------------------------------------- */ .form { margin-top: 2rem; padding: clamp(1.25rem, 4vw, 2.25rem); } .form__note { margin-bottom: 1.5rem; color: var(--muted); font-size: 0.9rem; } .field { min-width: 0; margin: 0 0 1.5rem; padding: 0; border: 0; /* removes the default fieldset border */ } /* Labels use Space Mono, with a "> " in front */ .field label, .field legend { display: block; margin-bottom: 0.45rem; padding: 0; color: var(--accent); font-family: var(--mono); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .field > label::before, .field > legend::before { content: ">\00a0"; content: ">\00a0" / ""; } /* Inputs use IBM Plex Sans. Square, one pixel border. */ input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; background: var(--field-bg); color: var(--field-text); border: 1px solid var(--field-border); border-radius: 0; caret-color: var(--accent); font-family: var(--sans); font-size: 1rem; /* 16px stops phones from zooming in on focus */ line-height: 1.4; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 10px var(--glow); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 2px; } input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--error); } /* Yes / No choices: square radio buttons */ .choices { display: flex; flex-wrap: wrap; gap: 0.6rem; } .field .choice { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; margin: 0; padding: 0.4rem 0.9rem; border: 1px solid var(--field-border); color: var(--text); font-family: var(--sans); font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer; } .field .choice:hover { border-color: var(--accent); background: var(--tint); } .choice:has(input:checked) { border-color: var(--accent); background: var(--tint); } .choice input { appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 1.15rem; height: 1.15rem; margin: 0; background: transparent; border: 1px solid var(--accent); border-radius: 0; } .choice input::before { content: ""; width: 0.6rem; height: 0.6rem; background: var(--accent); transform: scale(0); transition: transform 0.15s ease, background-color 0.3s ease; } .choice input:checked::before { transform: scale(1); } .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; } .choice input:focus-visible { outline: none; } /* --- Footer ---------------------------------------------------------- */ .site-footer { padding: 2rem 0; border-top: 1px solid var(--accent); /* single pixel accent line */ color: var(--muted); font-family: var(--mono); font-size: 0.85rem; } .footer__inner { display: grid; gap: 0.75rem; text-align: center; } /* ========================================================================== 6b. KEYBOARD SHORTCUTS: underlined letters, toggle captions, hint bar ========================================================================== */ /* The underlined shortcut letter (Alt + this letter). Slightly brighter than the surrounding text, like the highlighted letters in old DOS menus. */ .hotkey { color: var(--hotkey); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } /* On filled buttons the text is dark, so keep the letter dark and just underline it */ .btn--primary .hotkey { color: inherit; } .btn--primary:hover .hotkey { color: var(--hotkey); } /* Light theme: outline buttons fill green on hover, so the letter must match the paper colored text */ [data-theme="light"] .btn:not(.btn--primary):hover .hotkey { color: inherit; } /* Small caption in front of each toggle: THEME [ GREEN / AMBER / LIGHT ] */ .toggle-set { display: inline-flex; align-items: center; gap: 0.4rem; } .toggle__cap { color: var(--muted); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; } /* Hint bar under the nav. The secondary accent is its background so it reads like the status line of a classic DOS program. Desktop only. */ .hotkey-hint { display: none; } @media (min-width: 1024px) { :root { --hint-h: 1.6rem; } .hotkey-hint { display: block; height: var(--hint-h); background: var(--bar-bg); border-top: 1px solid var(--border); color: var(--bar-text); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; line-height: var(--hint-h); } .hotkey-hint p::before { content: ">\00a0"; content: ">\00a0" / ""; } } /* ========================================================================== 6c. PONG MINI GAME ========================================================================== */ .prompt-line::before { content: ">\00a0"; content: ">\00a0" / ""; color: var(--accent); font-family: var(--mono); font-weight: 700; } .pong { margin-top: 2rem; } .pong__body { padding: 1.25rem; } /* SCORE: 0 HIGH SCORE: 0 */ .pong__score { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; margin-bottom: 0.75rem; color: var(--heading); font-family: var(--mono); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* The canvas border is on the wrapper, so the canvas itself keeps an exact 16:10 shape */ .pong__stage { border: 1px solid var(--accent); line-height: 0; } .pong__stage:focus-within { box-shadow: 0 0 14px var(--glow); } #pong-canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; /* scales with the container width */ background: var(--bg); cursor: crosshair; touch-action: none; /* dragging on the game moves the paddle instead of scrolling the page */ user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .pong__controls { margin-top: 1rem; } .pong__help, .pong__alt { margin-top: 1rem; color: var(--muted); font-size: 0.9rem; } /* Terminal style message boxes (welcome back, achievement, game over) */ .term-box { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--card); border: 1px solid var(--accent); font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; } .term-box p { color: var(--text); margin-bottom: 0.35rem; } .term-box__title { color: var(--accent) !important; font-size: 1rem; font-weight: 700; } .term-box__title::before { content: ">\00a0"; content: ">\00a0" / ""; } .term-box__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; } .term-box__extra { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--border); } .term-box--notice { margin: 0 0 1rem; font-size: 0.8rem; } /* The discount code itself: inverted, like selected text in a terminal */ .code { padding: 0 0.4rem; background: var(--accent); color: var(--bg); font-weight: 700; letter-spacing: 0.08em; } /* ========================================================================== 7. RESPONSIVE LAYOUT (mobile first: the rules above are the phone layout) ========================================================================== */ @media (max-width: 600px) { /* Smaller table text so three columns fit on a phone */ .compare-table { font-size: 0.8rem; } .compare-table th, .compare-table td { padding: 0.7rem 0.6rem; } .price-list > li { padding-inline: 1rem; } .price-list--flush > li { padding-inline: 0; } .window__pad { padding: 1.25rem 1rem; } } @media (min-width: 720px) { .grid--projects { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 800px) { .footer__inner { grid-template-columns: 1fr auto 1fr; align-items: center; } .footer__inner > :first-child { text-align: left; } .footer__inner > :last-child { text-align: right; } } @media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } .grid--testimonials { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .section { padding: 6rem 0; } .hero__grid { grid-template-columns: 1.15fr 1fr; align-items: center; } .hero h1 { font-size: clamp(2.25rem, 4.3vw, 4rem); } .hero__visual { display: block; } } /* ========================================================================== 8. SCROLL FADE-IN Sections with class="reveal" fade in and rise 16px when scrolled into view. script.js adds .is-visible. This only applies when JavaScript works (the .js class), so content can never get stuck invisible. ========================================================================== */ .js .reveal { opacity: 0; transform: translateY(16px); transition: var(--fade), opacity 0.6s ease, transform 0.6s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } /* ========================================================================== 9. REDUCED MOTION AND HIGH CONTRAST ========================================================================== */ /* ACCESSIBILITY: if the visitor asks their device for less motion, stop the blinking and the fade-ins and show everything right away. */ @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } .js .reveal { opacity: 1; transform: none; } *, *::before, *::after { transition-duration: 0.01ms !important; } } /* ACCESSIBILITY: Windows High Contrast mode removes custom colors, so use system colors for the custom radio buttons and the active toggle. */ @media (forced-colors: active) { .choice input:checked::before { background: CanvasText; } .choice input { border-color: CanvasText; } .toggle button[aria-pressed="true"] { outline: 2px solid CanvasText; } }