/* Izerone Solutions — styles.css Palette anchored on the logo navy #09253E. Amber is used only for actions and for the "match" in the hero query. */ :root { --ink: #09253E; --ink-deep: #061A2C; --slate: #4A5B6B; --slate-light:#7D8C99; --rule: #DFE4E8; --paper: #FFFFFF; --paper-warm: #F6F7F8; --signal: #D9963C; --signal-dark:#B87C28; --measure: 68ch; --gutter: 24px; --max: 1120px; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; } /* ---- To self-host fonts (recommended — avoids third-party requests): 1. Download IBM Plex Sans (400, 500, 600) and IBM Plex Mono (400) as woff2 2. Upload them to /fonts/ 3. Uncomment the block below and delete the Google tags in each page's @font-face { font-family:"IBM Plex Sans"; src:url("/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } @font-face { font-family:"IBM Plex Sans"; src:url("/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight:500; font-display:swap; } @font-face { font-family:"IBM Plex Sans"; src:url("/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; } @font-face { font-family:"IBM Plex Mono"; src:url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; } ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.65; color: var(--ink); background: var(--paper); } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: var(--measure); } .skip { position: absolute; left: -9999px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } /* ---------- Header ---------- */ .masthead { border-bottom: 1px solid var(--rule); background: var(--paper); } .masthead .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); padding: 12px 0; } .brand img { width: 38px; height: 38px; display: block; } .brand b { font-weight: 600; font-size: 18px; letter-spacing: -0.01em; } .brand span { display: block; font-size: 13px; color: var(--slate); font-weight: 400; } .nav { display: flex; gap: 26px; flex-wrap: wrap; padding: 8px 0; } .nav a { color: var(--slate); text-decoration: none; font-size: 15.5px; padding: 4px 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); } /* ---------- Consulting service cards ---------- */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--signal-dark); font-weight: 600; margin: 0 0 12px; max-width: none; } .hero .eyebrow { color: #D9A75F; } .service-section { background: var(--paper); } .service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .service-card { display: block; padding: 26px; border: 1px solid var(--rule); border-top: 3px solid var(--ink); background: #fff; color: var(--ink); text-decoration: none; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .service-card:hover { transform: translateY(-2px); border-color: #B8C2CA; box-shadow: 0 8px 22px rgba(6,26,44,.07); text-decoration: none; } .service-card-featured { border-top-color: var(--signal); } .service-number { display: block; font-family: var(--mono); font-size: 12px; color: var(--slate-light); margin-bottom: 18px; } .service-card h3 { font-size: 21px; margin-bottom: 8px; } .service-card p { color: var(--slate); margin-bottom: 18px; } .service-link { font-size: 14.5px; font-weight: 600; color: var(--ink); } /* ---------- Hero ---------- */ .hero { background: var(--ink-deep); color: #EAF0F5; padding: 72px 0 76px; } .hero h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 20px; max-width: 18ch; color: #fff; } .hero p.lede { font-size: 19px; color: #B9C7D3; max-width: 56ch; margin: 0 0 32px; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .query { font-family: var(--mono); font-size: 13.5px; line-height: 1.85; background: #040F1C; border: 1px solid #1B3550; border-radius: 4px; padding: 20px 22px; overflow-x: auto; color: #8FA6B8; } .query .c { color: #5D7A92; } .query .k { color: #CFE0EC; } .query .hit { display: block; background: rgba(217,150,60,0.16); border-left: 2px solid var(--signal); margin-left: -22px; padding-left: 20px; color: #F0D5AB; } .query-cap { font-family: var(--mono); font-size: 12.5px; color: #7B8FA1; margin: 12px 0 0; } /* ---------- Buttons ---------- */ .actions { display: flex; gap: 14px; flex-wrap: wrap; } .btn { display: inline-block; font: inherit; font-weight: 500; font-size: 16px; padding: 13px 24px; border-radius: 3px; text-decoration: none; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--signal); color: #1C1200; border-color: var(--signal); } .btn-primary:hover { background: var(--signal-dark); border-color: var(--signal-dark); color: #fff; } .btn-ghost { background: transparent; color: #DCE6EE; border-color: #375068; } .btn-ghost:hover { border-color: #6F8BA3; color: #fff; } .btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-dark:hover { background: #0D3556; } /* ---------- Sections ---------- */ section { padding: 64px 0; } section + section { border-top: 1px solid var(--rule); } .tint { background: var(--paper-warm); } h2 { font-size: clamp(24px, 3.2vw, 31px); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; margin: 0 0 18px; max-width: 24ch; } h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; } p { max-width: var(--measure); margin: 0 0 18px; } .lead { font-size: 19px; color: var(--slate); } a { color: var(--ink); text-decoration-color: var(--signal); text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } /* ---------- Engagement shapes ---------- */ .shapes { border-top: 1px solid var(--rule); margin-top: 32px; } .shape { display: grid; grid-template-columns: 15.5rem 1fr; gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); } .shape h3 { margin: 0; } .shape p { margin: 0; color: var(--slate); } /* ---------- Sequenced process ---------- */ .steps { counter-reset: step; margin: 28px 0 0; padding: 0; list-style: none; max-width: var(--measure); } .steps li { counter-increment: step; display: grid; grid-template-columns: 2.2rem 1fr; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); } .steps li::before { content: counter(step); font-family: var(--mono); font-size: 14px; color: var(--signal-dark); padding-top: 3px; } /* Both the title and the description belong in column 2. Without this the description wraps back into the narrow number column. */ .steps strong, .steps span { grid-column: 2; } .steps strong { display: block; font-weight: 600; } .steps span { display: block; color: var(--slate); } ul.plain { padding-left: 20px; max-width: var(--measure); color: var(--slate); } ul.plain li { margin-bottom: 8px; } .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; } .cols p { margin-bottom: 0; } .callout { border-left: 3px solid var(--signal); padding: 4px 0 4px 20px; margin: 28px 0; color: var(--slate); } /* ---------- FAQ ---------- */ .faq { max-width: var(--measure); } .faq details { border-bottom: 1px solid var(--rule); padding: 16px 0; } .faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--signal-dark); font-weight: 400; } .faq details[open] summary::after { content: "\2013"; } .faq details p { margin: 12px 0 0; color: var(--slate); } /* ---------- Closing band ---------- */ .band { background: var(--ink); color: #E7EEF4; } .band h2 { color: #fff; } .band p { color: #B6C6D3; } /* ---------- Form ---------- */ .form { max-width: 34rem; } .field { margin-bottom: 20px; } .field label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 15.5px; } .field .help { display: block; font-weight: 400; color: var(--slate-light); font-size: 14px; } .field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 11px 13px; border: 1px solid #C3CCD4; border-radius: 3px; background: #fff; color: var(--ink); } .field textarea { min-height: 150px; resize: vertical; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .notice { padding: 14px 18px; border-radius: 3px; margin-bottom: 28px; max-width: 34rem; } .notice-ok { background: #EAF4EC; border: 1px solid #B9D7C1; } .notice-bad { background: #FBEEEE; border: 1px solid #E2BCBC; } .notice p { margin: 0; } :focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; } /* ---------- Footer ---------- */ .foot { border-top: 1px solid var(--rule); padding: 40px 0; font-size: 14.5px; color: var(--slate); background: var(--paper-warm); } .foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; margin-bottom: 32px; } .foot h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 10px; } .foot ul { list-style: none; padding: 0; margin: 0; } .foot li { margin-bottom: 6px; } .foot a { color: var(--slate); text-decoration: none; } .foot a:hover { color: var(--ink); text-decoration: underline; } .legal { border-top: 1px solid var(--rule); padding-top: 24px; font-size: 13.5px; line-height: 1.7; } .legal p { max-width: none; margin: 0 0 4px; } @media (max-width: 860px) { .service-grid { grid-template-columns: 1fr; } .hero-grid { grid-template-columns: 1fr; gap: 36px; } .shape { grid-template-columns: 1fr; gap: 6px; } section { padding: 48px 0; } .hero { padding: 52px 0 56px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }