/* ================================================================ Copious IT — Paper redesign theme (index page, experimental) ================================================================ The "1970s offset flyer" look: desaturated paper grounds, warm ink, flat surfaces, sharp corners, print texture. SCOPE: everything is gated behind `body.paper`, so this file can live alongside the existing site without touching other pages. It deliberately OVERRIDES base.css/home.css for the redesigned page (higher specificity + later load order). CHEAT SHEET — palette (kept in sync with /js/paper-config.js) paper #FEFEFE off-white sheet paper-sage #ABBAB9 cool dust ground paper-beige #C4BBA8 warm oatmeal ground ink #1E1E1E warm near-black ("running out" black) ink-soft rgba(30,30,30,.86) ink-muted rgba(30,30,30,.55) ink-hair rgba(30,30,30,.14) brand(teal) #1FB8A6 primary accent — links/hover/emphasis magenta #D45BB6 spot chrome pink #F386A1 soft spot / window titles warn #E85D3C alert ink marker #FFF3B0 highlighter fill FONTS Archivo / Archivo Black (display), JetBrains Mono (UI), VT323 (terminal widget). Loaded in index.html . ================================================================ */ /* ------------------------------------------------------------------ TOKENS ------------------------------------------------------------------- */ body.paper { --paper: #FEFEFE; --paper-sage: #ABBAB9; --paper-beige: #C4BBA8; --paper-blue: #A5B8D4; /* third rotating tone — dusty periwinkle */ --paper-rose: #D4A5A5; /* occasional fourth tone — dusty rose */ --ink: #1E1E1E; --ink-soft: rgba(30, 30, 30, 0.86); --ink-muted: rgba(30, 30, 30, 0.55); --ink-hair: rgba(30, 30, 30, 0.14); --teal: #1FB8A6; --magenta: #D45BB6; --pink: #F386A1; --warn: #E85D3C; --marker: #FFF3B0; background: var(--paper-beige); color: var(--ink-soft); font-family: 'Archivo', 'Inter', sans-serif; -webkit-font-smoothing: antialiased; } /* ------------------------------------------------------------------ PAPER GRAIN — CSS-only noise overlay (no image asset). A faint fixed sheet of SVG turbulence multiplies over the whole page so every surface reads as printed stock, not lit glass. pointer-events:none so it never blocks interaction. ------------------------------------------------------------------- */ body.paper::before { content: ''; position: fixed; inset: 0; z-index: 1; /* above backgrounds, below content */ pointer-events: none; opacity: 0.05; /* subtle — texture, never legibility */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* ------------------------------------------------------------------ TYPE — grotesque headings, mono UI. Sharp, tight, printed. ------------------------------------------------------------------- */ body.paper h1, body.paper h2, body.paper h3, body.paper h4 { font-family: 'Archivo Black', 'Archivo', sans-serif; color: var(--ink); letter-spacing: -0.02em; text-transform: none; } /* Kickers / labels — mono, uppercase, letterspaced (system-text voice) */ body.paper .paper-kicker { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); } /* ------------------------------------------------------------------ SECTION GROUNDS — rotate three desaturated paper tones (sage / beige / dusty-blue) so the page reads as a stack of colored sheets. Cards are always off-white, so every tone keeps contrast. ------------------------------------------------------------------- */ body.paper .paper-section { background: var(--paper-sage); } body.paper .paper-section--light { background: var(--paper); } body.paper .paper-section--beige { background: var(--paper-beige); } body.paper .paper-section--blue { background: var(--paper-blue); } body.paper .paper-section--rose { background: var(--paper-rose); } body.paper .paper-section--ink { background: var(--ink); color: var(--paper); } /* Hairline rules on paper (replaces the old cyan gradient divider) */ body.paper .section-divider { height: 1px; max-width: 100%; background: var(--ink-hair); } /* ------------------------------------------------------------------ WINDOW PANEL — the typesafe.ai-inspired framing. A flat ink box with a hard 1px border, sharp corners, no shadow, no blur, and an optional title bar. Content lives inside. ------------------------------------------------------------------- */ body.paper .paper-window { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; } body.paper .paper-window__bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--ink); color: var(--paper); font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } body.paper .paper-window__bar .dot { width: 8px; height: 8px; border: 1px solid var(--paper); background: transparent; } body.paper .paper-window__title { color: var(--pink); } body.paper .paper-window__meta { margin-left: auto; color: rgba(254,254,254,.5); } body.paper .paper-window__body { padding: 20px; } /* ------------------------------------------------------------------ CARDS — recast of .card-hover: flat paper, hard ink border, sharp. Hover = a faint ink wash, never a lift/glow. ------------------------------------------------------------------- */ body.paper .card-hover { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; box-shadow: none; transition: background 0.15s ease, color 0.15s ease; } body.paper .card-hover:hover { transform: none; border-color: var(--ink); box-shadow: none; background: rgba(30, 30, 30, 0.04); } /* ------------------------------------------------------------------ BUTTONS — flat ink blocks, sharp corners, no sheen. Hover = teal. ------------------------------------------------------------------- */ body.paper .btn-shine::after { display: none; } /* kill the light sweep */ body.paper .paper-btn { display: inline-block; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 0; padding: 14px 26px; font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.15s ease, color 0.15s ease; } body.paper .paper-btn:hover { background: var(--teal); border-color: var(--teal); color: var(--ink); } /* Outline variant — ink rule on paper, fills teal on hover. */ body.paper .paper-btn--outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); } body.paper .paper-btn--outline:hover { background: var(--ink); color: var(--paper); } /* ------------------------------------------------------------------ CHROME — nav / drawer / mobile menu / modal / banner / footer. nav.js emits hardcoded utility classes (bg-slate-950/80, rounded-xl, text-slate-300, brand-400...). base.css + home.css style them dark. These scoped rules RECOLOR that chrome to ink-on-paper. Higher specificity (body.paper prefix) wins over the base rules. ------------------------------------------------------------------- */ /* --- Nav bar: flat ink strip framing the paper body --- */ body.paper #mainNav { background: var(--ink) !important; border-bottom: 1px solid var(--ink); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.paper #mainNav .nav-link, body.paper #mainNav .nav-services-btn, body.paper #mainNav #menuBtn { color: var(--paper) !important; border-radius: 0; } body.paper #mainNav .nav-link:hover, body.paper #mainNav .nav-services-btn:hover, body.paper #mainNav #menuBtn:hover { background: transparent !important; color: var(--pink) !important; } /* Active page link stays white, marked by a teal underline */ body.paper #mainNav .nav-link[aria-current="page"] { color: var(--paper) !important; box-shadow: inset 0 -2px 0 var(--teal); } /* Contact button in the bar */ body.paper #mainNav button[onclick="openContact()"] { background: var(--paper) !important; color: var(--ink) !important; border: 1px solid var(--paper); border-radius: 0; } body.paper #mainNav button[onclick="openContact()"]:hover { background: var(--teal) !important; color: var(--ink) !important; border-color: var(--teal); } /* --- Services mega-drawer: paper panel, ink rules, mono labels --- */ body.paper .services-dropdown .dropdown-panel { background: var(--paper); border-bottom: 1px solid var(--ink); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } body.paper .services-dropdown .category-title { color: var(--ink); font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid var(--ink); } body.paper .services-dropdown .service-link { border-radius: 0; } body.paper .services-dropdown .service-link:hover { background: rgba(30,30,30,0.05); } body.paper .services-dropdown .service-link .svc-name { color: var(--ink); } body.paper .services-dropdown .service-link:hover .svc-name { color: var(--teal); } body.paper .services-dropdown .service-link .svc-desc { color: var(--ink-muted); } body.paper .services-dropdown .dropdown-footer { border-top: 1px solid var(--ink); } body.paper .services-dropdown .view-all { color: var(--ink); } body.paper .services-dropdown .view-all:hover { color: var(--teal); } /* --- Mobile menu: flat ink panel, paper text --- */ body.paper .mobile-menu { background-color: var(--ink) !important; border-left: 1px solid var(--ink); } body.paper .mobile-menu a, body.paper .mobile-menu .mob-services-btn { color: var(--paper) !important; border-radius: 0; } body.paper .mobile-menu a:hover, body.paper .mobile-menu .mob-services-btn:hover { background: rgba(254,254,254,0.08) !important; color: var(--pink) !important; } body.paper .mobile-menu .border-t { border-color: rgba(254,254,254,0.2) !important; } body.paper .mobile-menu a[href="/free-it-assessment"] { border: 1px solid var(--paper) !important; color: var(--paper) !important; } body.paper .mobile-menu button[onclick="openContact()"] { background: var(--paper) !important; color: var(--ink) !important; border-radius: 0 !important; } /* --- Contact modal: paper card, ink border, sharp --- */ body.paper .contact-modal { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.paper .contact-modal h2 { color: var(--ink) !important; } body.paper .contact-modal input, body.paper .contact-modal textarea { background: var(--paper) !important; border: 1px solid var(--ink) !important; border-radius: 0 !important; color: var(--ink) !important; } body.paper .contact-modal input::placeholder, body.paper .contact-modal textarea::placeholder { color: var(--ink-muted) !important; } body.paper .contact-modal button[type="submit"] { background: var(--ink) !important; color: var(--paper) !important; border-radius: 0 !important; } body.paper .contact-modal button[type="submit"]:hover { background: var(--teal) !important; color: var(--ink) !important; } body.paper .contact-modal .border-slate-500\/60 { border-color: var(--ink) !important; } body.paper .contact-modal label { color: var(--ink-muted) !important; } /* --- Contact banner: flat ink strip --- */ body.paper #contact-banner { background: var(--ink); border-top: 1px solid var(--ink); } body.paper #contact-banner a { color: var(--pink); } body.paper #contact-banner a:hover { color: var(--paper); } body.paper #contact-banner img { filter: invert(1); opacity: 0.85; } /* --- Footer: ink block --- */ body.paper #siteFooter footer { background: var(--ink) !important; border-top: 1px solid var(--ink); } body.paper #siteFooter h4 { color: var(--paper) !important; } body.paper #siteFooter p, body.paper #siteFooter a { color: rgba(254,254,254,0.72) !important; } body.paper #siteFooter a:hover { color: var(--pink) !important; } body.paper #siteFooter .section-divider { background: rgba(254,254,254,0.2); } /* ------------------------------------------------------------------ LINK HOVER — teal accent everywhere on paper. ------------------------------------------------------------------- */ body.paper a { transition: color 0.15s ease; } body.paper .hover\:text-brand-400:hover { color: var(--teal) !important; } body.paper .group:hover .group-hover\:text-brand-400 { color: var(--teal) !important; } /* ------------------------------------------------------------------ HERO — flat paper, no gradient/orbs/grid. Texture + a print panel. ------------------------------------------------------------------- */ body.paper .hero-gradient { background: var(--paper); animation: none; } body.paper .orb-1, body.paper .orb-2, body.paper .orb-3, body.paper .hero-grid { display: none; } /* Hero headline accent word — teal, no gradient clip */ body.paper .hero-accent { color: var(--teal); } /* ------------------------------------------------------------------ DESK-ACCESSORY WIDGET — typesafe.ai-inspired live system tile. A small framed window with a mono title bar and terminal readout. ------------------------------------------------------------------- */ body.paper .paper-widget { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; font-family: 'JetBrains Mono', monospace; box-shadow: none; } body.paper .paper-widget__bar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; background: var(--ink); color: var(--paper); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } body.paper .paper-widget__bar .paper-widget__title { color: var(--pink); } body.paper .paper-widget__bar .paper-widget__meta { margin-left: auto; color: rgba(254,254,254,.5); } body.paper .paper-widget__body { padding: 12px 14px; } body.paper .paper-widget__line { display: flex; justify-content: space-between; gap: 16px; font-size: 0.82rem; color: var(--ink); line-height: 1.7; } body.paper .paper-widget__line .k { color: var(--ink-muted); } body.paper .paper-widget__clock { font-family: 'VT323', 'JetBrains Mono', monospace; font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: 0.02em; } body.paper .paper-widget__blink { animation: paper-blink 1.1s steps(1) infinite; } @keyframes paper-blink { 50% { opacity: 0; } } /* ------------------------------------------------------------------ BADGE + DOT — small chrome bits used in the hero guide strip and the widget title bar. Defined as classes so no inline CSS is needed. ------------------------------------------------------------------- */ body.paper .paper-badge { display: inline-block; flex-shrink: 0; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); padding: 2px 8px; font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; } body.paper .paper-dot { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--paper); background: transparent; } /* ------------------------------------------------------------------ PRINT STAMP — corner version mark (typesafe.ai-style artifact). ------------------------------------------------------------------- */ body.paper .paper-stamp { font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); } /* ------------------------------------------------------------------ SCROLL REVEAL — keep a subtle fade only (print doesn't glide). ------------------------------------------------------------------- */ body.paper .animate-on-scroll { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; } body.paper .animate-on-scroll.visible { opacity: 1; transform: none; } /* ------------------------------------------------------------------ IMAGERY — duotone-ink treatment so photos sit on paper. Desaturate + warm slightly; never so far that detail is lost. ------------------------------------------------------------------- */ body.paper img.paper-img { filter: grayscale(0.55) contrast(1.05) sepia(0.12); border: 1px solid var(--ink); border-radius: 0; } /* ------------------------------------------------------------------ RESPONSIVE — widget sits inline on small screens. ------------------------------------------------------------------- */ @media (max-width: 767px) { body.paper .paper-widget { width: 100%; } }