/* ============================================================ INDIANCAREERGUIDE — core theme One palette: warm notebook paper, cool ink, one saffron action. Everything is prefixed .icg- / --icg tokens live on :root. ============================================================ */ :root{ --ink:#131b2e; --ink-2:#3c4457; --muted:#6f6b64; --faint:#9a958c; --paper:#fbfaf7; --card:#ffffff; --line:#e6e2d9; --line-2:#efece5; --blue:#1b3fc4; --blue-soft:#eef1ff; --saffron:#ef8b00; --verify:#0e8a5f; --margin-rule:rgba(198,64,64,.16); --f-display:"Archivo",ui-sans-serif,system-ui,sans-serif; --f-body:"Inter",ui-sans-serif,system-ui,sans-serif; --f-data:"IBM Plex Mono",ui-monospace,monospace; --gut:24px; --max:1240px; /* The header and nav run a little wider than the content column. */ --max-head:1400px; } *,*::before,*::after{box-sizing:border-box} /* The paper colour lives on so the grid drawn by body::before is not hidden behind an opaque body background. */ html{scroll-behavior:smooth;background:var(--paper)} body{ margin:0;background:transparent;color:var(--ink); font-family:var(--f-body);font-size:16px;line-height:1.5; -webkit-font-smoothing:antialiased; } /* Notebook grid across the whole page, not just the hero. Fixed so it stays put while the content scrolls over it. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(to right, rgba(19,27,46,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(19,27,46,.045) 1px, transparent 1px); background-size:22px 22px; } /* The notebook's margin rule, running the full height of the window behind everything transparent. Tinted bands are opaque and paint their own length of it at the same offset, so the line reads as one unbroken rule from the top of the page to the bottom. */ body::after{ content:"";position:fixed;z-index:-1;top:0;bottom:0; left:max(28px, calc(50% - 620px - 34px)); width:1px;background:var(--margin-rule);pointer-events:none; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px} /* Content column. The +2*gut matters: .icg-hero-wrap is max-width:--max with its padding on the hero instead, so its content really is 1240 wide, while a border-box shell of the same max-width gives only 1192. Every band was therefore 48px narrower than the hero above it - visible the moment a section had a border, which is how the two-step panel exposed it. Adding the gutters back makes the shell's CONTENT 1240 and lines every band up with the hero. */ .icg-shell{max-width:calc(var(--max) + var(--gut) * 2);margin:0 auto;padding:0 var(--gut)} /* shared section furniture ------------------------------------ */ .icg-band{position:relative;padding:76px 0;background:transparent} .icg-band--tight{padding-top:0} /* ---------- tinted bands ---------- A band with no modifier is transparent: the paper and the page-wide grid on body::before show through it, and it needs nothing here. A band with a colour is a different problem. The page grid is painted behind everything, so a solid band covers it and the lines stop - which is why the ruled paper used to read only in the hero. These bands therefore carry their own grid, painted ON TOP of their own colour, and their own length of the red margin rule so it runs unbroken down the page. isolation:isolate is what keeps those two layers between the band's background and its content. Solid rather than translucent on purpose: two grids at 22px, one fixed and one scrolling, drift against each other and shimmer. Each band is opaque, so only one grid is ever visible in one place. The tints are all one step off the paper, in the theme's own hues - warm sand, the blue of --blue-soft, the green of --verify. They are there to separate one section from the next, not to be noticed. */ .icg-band--white,.icg-band--sand,.icg-band--sky,.icg-band--mint{ isolation:isolate; border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .icg-band--white{background:#ffffff} .icg-band--sand{background:#faf6ee} .icg-band--sky{background:#f5f7fd} .icg-band--mint{background:#f4f9f5} .icg-band--white::before,.icg-band--sand::before, .icg-band--sky::before,.icg-band--mint::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image: linear-gradient(to right, rgba(19,27,46,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(19,27,46,.05) 1px, transparent 1px); background-size:22px 22px; } /* The margin rule, at the same offset the hero uses, so the line reads as one continuous rule from the top of the page to the bottom. */ .icg-band--white::after,.icg-band--sand::after, .icg-band--sky::after,.icg-band--mint::after{ content:"";position:absolute;z-index:-1;top:0;bottom:0; left:max(28px, calc(50% - 620px - 34px)); width:1px;background:var(--margin-rule);pointer-events:none; } .icg-head{display:flex;align-items:flex-end;gap:24px;margin-bottom:34px} .icg-eyebrow{ display:flex;align-items:center;gap:8px;margin:0 0 10px; font-family:var(--f-data);font-size:11px;font-weight:500; letter-spacing:.11em;text-transform:uppercase;color:var(--muted); } .icg-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--verify); box-shadow:0 0 0 3px rgba(14,138,95,.16)} .icg-h2{ font-family:var(--f-display);font-weight:800;letter-spacing:-.032em;line-height:1.06; font-size:clamp(26px,3vw,37px);margin:0;text-wrap:balance; } .icg-h2 em{font-style:normal;color:var(--blue)} .icg-lede{margin:12px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:36rem} .icg-more{ margin-left:auto;flex:0 0 auto; display:inline-flex;align-items:center;gap:7px; font-size:14px;font-weight:500;color:var(--blue);text-decoration:none; border-bottom:1px solid rgba(27,63,196,.25);padding-bottom:3px; transition:border-color .16s ease,gap .16s ease; } .icg-more:hover{border-color:var(--blue);gap:11px} .icg-more svg{width:14px;height:14px} .icg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ============================================================ SCROLL PROGRESS A line across the very top of the window that fills left to right as the page scrolls, and reaches the right edge exactly at the bottom. z-index 60 puts it above the header's 50, so it stays the topmost thing on screen even while the header is folding underneath it. The fill is driven with transform:scaleX rather than width. Width would relayout on every frame of every scroll; a transform is composited, so this costs nothing even on a long page. It also carries no transition on purpose - the bar is a readout of where you are, and easing it would make it lag behind the scroll it reports. ============================================================ */ .icg-progress{ position:fixed;top:0;left:0;right:0;height:3px;z-index:60; pointer-events:none;background:transparent; } .icg-progress i{ display:block;height:100%;width:100%; transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,var(--blue),#6d28d9 48%,var(--saffron)); } @media print{ .icg-progress{display:none} } /* ============================================================ HEADER + NAV ============================================================ */ .icg-top{ position:sticky;top:0;z-index:50; background:rgba(251,250,247,.88); backdrop-filter:saturate(140%) blur(10px); -webkit-backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line); } .icg-top-in{ max-width:var(--max-head);margin:0 auto;padding:0 var(--gut); display:flex;align-items:center;gap:22px;height:96px; } /* Full brand lockup. The PNG is already tightly cropped, so it is simply sized by height — no clipping. multiply blends its near-white plate into the paper background. Change --logo-h alone to resize it. */ .icg-logo{ --logo-h:76px; display:block;flex:0 0 auto;text-decoration:none;line-height:0; } .icg-logo > img{ display:block;height:var(--logo-h);width:auto;max-width:100%; mix-blend-mode:multiply; } .icg-logo-mark{ width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;overflow:hidden; background:linear-gradient(145deg,#2b56e8,#16309b); box-shadow:0 2px 6px -1px rgba(27,63,196,.45),inset 0 1px 0 rgba(255,255,255,.3); } .icg-logo-mark svg{width:17px;height:17px} .icg-logo-mark img{width:100%;height:100%;object-fit:cover} .icg-logo span:nth-of-type(1){color:var(--ink)} .icg-logo span:nth-of-type(2){color:var(--saffron)} .icg-logo span:nth-of-type(3){color:var(--verify)} .icg-search{flex:1 1 auto;max-width:420px;position:relative;display:flex;align-items:center; margin-left:clamp(10px,3.5vw,56px)} .icg-search svg{position:absolute;left:12px;width:15px;height:15px;color:var(--faint);pointer-events:none} .icg-search input{ width:100%;height:40px;padding:0 14px 0 34px; font:inherit;font-size:14px;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:10px; box-shadow:inset 0 1px 2px rgba(19,27,46,.03); transition:border-color .16s ease,box-shadow .16s ease; } .icg-search input::placeholder{color:var(--faint)} .icg-search input:focus{outline:none;border-color:rgba(27,63,196,.45);box-shadow:0 0 0 4px rgba(27,63,196,.08)} .icg-utils{margin-left:auto;display:flex;align-items:center;gap:4px;flex:0 0 auto} .icg-util{ display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px; text-decoration:none;white-space:nowrap; transition:background .16s ease,box-shadow .16s ease; } .icg-util:hover{background:#f4f2ec;box-shadow:inset 0 0 0 1px var(--line)} .icg-util svg{width:17px;height:17px;color:var(--blue);flex:0 0 auto} .icg-util > span{display:block;min-width:0} .icg-util b{display:block;font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--ink);line-height:1.25} .icg-util small{display:block;font-family:var(--f-data);font-size:10px;line-height:1.3;color:var(--muted);letter-spacing:.02em;margin-top:1px} .icg-util--soon{cursor:default;opacity:.6} .icg-util--soon:hover{background:none;box-shadow:none} .icg-nav{border-bottom:1px solid var(--line);background:rgba(251,250,247,.88)} .icg-nav-in{ max-width:var(--max-head);margin:0 auto;padding:0 var(--gut); display:flex;align-items:center;gap:2px;height:52px; } .icg-nav a{ font-size:14.5px;font-weight:500;color:var(--ink-2);text-decoration:none; padding:9px 15px;border-radius:8px;position:relative;white-space:nowrap; transition:color .16s ease,background .16s ease; } .icg-nav a:hover{color:var(--ink);background:#f4f2ec} .icg-nav a[aria-current="page"]{color:var(--ink);font-weight:600} .icg-nav a[aria-current="page"]::after{ content:"";position:absolute;left:15px;right:15px;bottom:-14px;height:2px; background:var(--ink);border-radius:2px; } .icg-nav .icg-nav-cta{ margin-left:auto; display:inline-flex;align-items:center;gap:8px; background:var(--saffron);color:#fff;font-weight:600;font-size:14px; padding:10px 16px;border-radius:10px; box-shadow:0 2px 5px -1px rgba(239,139,0,.35); transition:transform .16s ease,filter .16s ease; } .icg-nav .icg-nav-cta:hover{background:var(--saffron);color:#fff;filter:brightness(1.05);transform:translateY(-1px)} .icg-nav .icg-nav-cta svg{width:14px;height:14px} /* ------------------------------------------------------------ CONDENSE ON SCROLL Two pinned bars is 148px of the window gone on every page. Scrolling down means the reader has chosen the page they are on, so the nav row folds away and the brand row tightens to 60px - logo, search and the two quick links stay, because those are the things you reach for mid-page. Scrolling up is a signal you want to leave, so the full header comes straight back. State lives in .is-compact on .icg-top, set by icgInit in site.js. Only above 820px: below that the header is not pinned at all, so there is nothing to reclaim. ------------------------------------------------------------ */ @media (min-width:821px){ /* FIXED, NOT STICKY - and this is what stopped the flicker. Sticky keeps the header in normal flow. Folding it therefore shortened the document by 88px, which pulled everything below it upward and, near the bottom of a page, forced the browser to clamp the scroll position. That clamp arrives as a scroll event moving UP, which re-opened the header, which lengthened the document again, which allowed another fold: a loop the thresholds could only damp, never stop. Out of flow, the document height never changes when the header folds, so the loop has nothing to feed on. 149px is the header at rest - 96 brand row + 52 nav row + its own 1px rule, all border-box - and replaces the space it used to take up in flow. */ body{padding-top:149px} .icg-top{position:fixed;left:0;right:0} .icg-top-in{transition:height .28s cubic-bezier(.4,0,.2,1)} .icg-logo > img{transition:height .28s cubic-bezier(.4,0,.2,1)} .icg-search input{transition:height .28s cubic-bezier(.4,0,.2,1), border-color .16s ease,box-shadow .16s ease} .icg-util{transition:padding .28s cubic-bezier(.4,0,.2,1), background .16s ease,box-shadow .16s ease} /* max-height rather than display, so the second line folds away with the bar instead of snapping out and jolting the row's height. */ .icg-util small{ max-height:16px;overflow:hidden; transition:opacity .14s ease,max-height .28s cubic-bezier(.4,0,.2,1), margin-top .28s cubic-bezier(.4,0,.2,1); } /* Height rather than max-height so the fold is exact and does not coast. The row is only clipped while collapsing, so the active-page underline - which sits below the row on purpose - is untouched at full height. */ .icg-nav{ height:52px; transition:height .28s cubic-bezier(.4,0,.2,1),opacity .18s ease, border-color .18s ease,visibility 0s; } .icg-top.is-compact .icg-top-in{height:60px} .icg-top.is-compact .icg-logo{--logo-h:42px} .icg-top.is-compact .icg-search input{height:34px} .icg-top.is-compact .icg-util{padding:5px 10px} .icg-top.is-compact .icg-util small{opacity:0;max-height:0;margin-top:0} .icg-top.is-compact .icg-nav{ height:0;opacity:0;overflow:hidden;pointer-events:none; border-bottom-color:transparent;visibility:hidden; transition:height .28s cubic-bezier(.4,0,.2,1),opacity .18s ease, border-color .18s ease,visibility 0s linear .28s; } } /* ============================================================ HERO ============================================================ */ .icg-hero{ position:relative;isolation:isolate;overflow:hidden; padding:64px var(--gut) 68px; } .icg-hero::before{ content:"";position:absolute;z-index:-2;inset:0;pointer-events:none; background-image: linear-gradient(to right, rgba(19,27,46,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(19,27,46,.03) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 85%); mask-image:radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 85%); } .icg-hero::after{ content:"";position:absolute;z-index:-1;top:0;bottom:0; left:max(28px, calc(50% - 620px - 34px)); width:1px;background:var(--margin-rule);pointer-events:none; } .icg-hero-wrap{ max-width:var(--max);margin:0 auto; display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center; } .icg-h1{ font-family:var(--f-display); font-size:clamp(36px,4.4vw,58px); font-weight:800;line-height:1.02;letter-spacing:-.035em; margin:0 0 18px;text-wrap:balance; } .icg-h1 em{font-style:normal;color:var(--blue)} /* Positioning line inside the H1: keeps the page's scope clear when the hero panel is showing one specific stage. */ .icg-h1-lead{ display:block;margin:0 0 12px; font-family:var(--f-body);font-size:clamp(15px,1.55vw,19px);font-weight:600; line-height:1.4;letter-spacing:0;color:var(--ink-2); } .icg-sub{font-size:16.5px;line-height:1.6;color:var(--ink-2);max-width:31rem;margin:0 0 30px} .icg-pick-label{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;margin-bottom:11px} .icg-pick-label::after{content:"";flex:1;height:1px;background:var(--line)} .icg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px} .icg-chip{ font-family:var(--f-body);font-size:13.5px;font-weight:500; color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:9px; padding:9px 13px;cursor:pointer;box-shadow:0 1px 1px rgba(19,27,46,.03); transition:border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease; } .icg-chip:hover{border-color:#cfd6ea;color:var(--ink);transform:translateY(-1px)} .icg-chip[aria-pressed="true"]{ background:var(--ink);border-color:var(--ink);color:#fff; box-shadow:0 4px 12px -4px rgba(19,27,46,.45); } .icg-chip b{font-family:var(--f-data);font-weight:500;font-size:12.5px;opacity:.75;margin-right:5px} .icg-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px} .icg-cta{ display:inline-flex;align-items:center;gap:9px; font-family:var(--f-body);font-size:15px;font-weight:600;color:#fff; background:var(--saffron);border:0;border-radius:11px;padding:14px 20px;cursor:pointer; text-decoration:none; box-shadow:0 2px 5px -1px rgba(239,139,0,.4),0 12px 24px -14px rgba(239,139,0,.9); transition:transform .16s ease,box-shadow .2s ease,filter .2s ease; } .icg-cta:hover{color:#fff;filter:brightness(1.04);transform:translateY(-1px)} .icg-cta:active{transform:translateY(1px)} .icg-cta svg{width:15px;height:15px;transition:transform .2s ease} .icg-cta:hover svg{transform:translateX(3px)} /* Secondary button, used across guide pages. */ .icg-cta--ghost{ background:#fff;color:var(--ink);border:1px solid var(--line); box-shadow:0 1px 1px rgba(19,27,46,.03); } .icg-cta--ghost:hover{color:var(--ink);border-color:#cfd6ea;filter:none} .icg-quiz{ font-size:14px;color:var(--ink-2);text-decoration:none; border-bottom:1px solid var(--line);padding-bottom:2px; transition:color .16s ease,border-color .16s ease; } .icg-quiz:hover{color:var(--blue);border-color:var(--blue)} .icg-social{display:flex;align-items:center;gap:11px} .icg-faces{display:flex} .icg-faces span{ width:27px;height:27px;border-radius:50%;margin-left:-8px;display:grid;place-items:center; font-family:var(--f-data);font-size:10px;font-weight:600;color:#fff;border:2px solid var(--paper); } .icg-faces span:first-child{margin-left:0} .icg-faces span:nth-child(1){background:linear-gradient(140deg,#2b56e8,#16309b)} .icg-faces span:nth-child(2){background:linear-gradient(140deg,#12a37a,#0a6a4c)} .icg-faces span:nth-child(3){background:linear-gradient(140deg,#f0a02a,#d06b00)} .icg-faces span:nth-child(4){background:linear-gradient(140deg,#7a5cf0,#4326b8)} .icg-social p{margin:0;font-size:13px;color:var(--muted)} .icg-social b{color:var(--ink);font-weight:600} /* ---- routes panel ---- */ .icg-panel{ position:relative;background:var(--card);border:1px solid var(--line); border-radius:20px;padding:20px 20px 16px; box-shadow: 0 1px 2px rgba(19,27,46,.04), 0 10px 20px -12px rgba(19,27,46,.12), 0 40px 70px -45px rgba(27,63,196,.45); } .icg-panel-head{display:flex;align-items:flex-start;gap:11px;padding-bottom:15px; border-bottom:1px solid var(--line);margin-bottom:4px} .icg-badge{ width:30px;height:30px;flex:0 0 auto;display:grid;place-items:center;border-radius:9px;color:#fff; background:linear-gradient(145deg,#2b56e8,#16309b); box-shadow:0 2px 6px -1px rgba(27,63,196,.5),inset 0 1px 0 rgba(255,255,255,.3); } .icg-badge svg{width:16px;height:16px} .icg-panel-head h2{font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.015em;margin:0 0 2px} .icg-panel-head p{margin:0;font-family:var(--f-data);font-size:11px;letter-spacing:.02em;color:var(--muted)} .icg-count{ margin-left:auto;font-family:var(--f-data);font-size:11px;color:var(--muted); background:#f6f5f1;border:1px solid var(--line);border-radius:6px;padding:4px 7px;white-space:nowrap; } .icg-route{ display:block;width:100%;text-align:left;background:none;border:0; border-bottom:1px solid var(--line);padding:15px 4px 16px;cursor:pointer; font-family:inherit;border-radius:10px;transition:background .18s ease;color:inherit; } .icg-route:last-of-type{border-bottom:0} .icg-route:hover{background:#fafaf7} .icg-route-top{display:flex;align-items:baseline;gap:10px;margin-bottom:13px} .icg-role{font-family:var(--f-display);font-size:16px;font-weight:700;letter-spacing:-.018em;color:var(--ink)} .icg-pay{margin-left:auto;font-family:var(--f-data);font-size:13px;font-weight:500;color:var(--ink); white-space:nowrap;font-variant-numeric:tabular-nums} .icg-pay small{display:block;font-size:9.5px;font-weight:400;letter-spacing:.04em; text-transform:uppercase;color:var(--muted);text-align:right;margin-top:2px} .icg-match{font-family:var(--f-data);font-size:11px;font-weight:600;color:var(--verify); background:rgba(14,138,95,.08);border-radius:5px;padding:3px 6px} .icg-track{position:relative;padding-left:2px;display:block} .icg-track-line{ position:absolute;left:5px;right:5px;top:5px;height:2px; background:linear-gradient(90deg,var(--blue),rgba(27,63,196,.25));border-radius:2px; transform-origin:left center;transform:scaleX(0); transition:transform .55s cubic-bezier(.22,.9,.24,1); } .icg-route.is-in .icg-track-line{transform:scaleX(1)} .icg-stations{display:flex;gap:10px;position:relative} .icg-station{flex:1 1 0;min-width:0} .icg-dot{ display:block;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--blue); margin-bottom:8px;opacity:0;transform:scale(.4); transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1); } .icg-station:last-child .icg-dot{background:var(--blue)} .icg-route.is-in .icg-dot{opacity:1;transform:scale(1)} .icg-route.is-in .icg-station:nth-child(2) .icg-dot{transition-delay:.16s} .icg-route.is-in .icg-station:nth-child(3) .icg-dot{transition-delay:.32s} .icg-step{display:block;font-family:var(--f-data);font-size:9.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--muted);margin-bottom:3px} .icg-what{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);line-height:1.35} .icg-facts{display:flex;align-items:center;gap:14px;flex-wrap:wrap; border-top:1px solid var(--line);margin-top:2px;padding:14px 4px 4px} .icg-fact{font-family:var(--f-data);font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px} .icg-fact b{font-family:var(--f-display);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .icg-fact svg{width:13px;height:13px;color:var(--saffron)} .icg-fact:not(:last-child)::after{content:"";width:1px;height:16px;background:var(--line);margin-left:14px} .icg-note{margin:12px 0 0;padding-left:2px;font-family:var(--f-data);font-size:10.5px;line-height:1.5;color:var(--faint)} /* ============================================================ STREAMS — the first decision after Class 10 Same card language as .icg-cat, because these sit on the same page and should not read as a different component: 16px radius, hairline border, the faintest shadow, a lift on hover. The one addition is the accent edge, which carries the branch colour the path finder uses for the same stream, so the two pages agree at a glance. The whole section is bound to the "10th" chip in the hero — these are the routes out of Class 10 and nothing else — so site.js hides it when another stage is chosen. ============================================================ */ .icg-streams{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .icg-stream{ position:relative;display:flex;flex-direction:column;min-width:0; background:var(--card);border:1px solid var(--line);border-radius:16px; padding:18px 18px 15px 21px;text-decoration:none;overflow:hidden; box-shadow:0 1px 1px rgba(19,27,46,.03); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .icg-stream::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent); } .icg-stream:hover{ transform:translateY(-3px);border-color:#d5daea; box-shadow:0 2px 4px rgba(19,27,46,.04),0 18px 30px -20px rgba(19,27,46,.35); } .icg-stream-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px} .icg-stream-name{ flex:1 1 auto;min-width:0; font-family:var(--f-display);font-size:16px;font-weight:700; letter-spacing:-.022em;line-height:1.25;color:var(--ink); } .icg-stream-score{ flex:0 0 auto;font-family:var(--f-data);font-size:15px;font-weight:600; font-variant-numeric:tabular-nums;line-height:1.2; } .icg-stream-score.is-hi{color:var(--verify)} .icg-stream-score.is-mid{color:#b45309} .icg-stream-score.is-low{color:#be2c2c} .icg-stream-meta{ font-size:13px;line-height:1.5;color:var(--muted); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .icg-stream-foot{ margin-top:auto;padding-top:14px; display:flex;align-items:center;justify-content:space-between;gap:10px; font-family:var(--f-data);font-size:11px;color:var(--muted); } .icg-stream-foot b{ color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums; } .icg-stream-foot svg{ width:13px;height:13px;flex:0 0 auto;color:var(--blue); transition:transform .2s ease; } .icg-stream:hover .icg-stream-foot svg{transform:translateX(3px)} /* Where you are, once you have drilled past the eight. Hidden at the top level, because there is nowhere to go back to. */ .icg-streams-crumb{ display:flex;align-items:center;gap:4px;flex-wrap:wrap; margin:-14px 0 20px;font-family:var(--f-data);font-size:11.5px;color:var(--muted); } .icg-streams-crumb button{ font-family:inherit;font-size:inherit;color:var(--ink-2); background:none;border:0;padding:4px 8px;border-radius:7px;cursor:pointer; transition:background .16s ease,color .16s ease; } .icg-streams-crumb button:hover{background:var(--blue-soft);color:var(--blue)} .icg-streams-crumb .sep{color:var(--line)} .icg-streams-crumb .now{color:var(--ink);font-weight:600;padding:4px 2px} /* The bottom of a branch with no page behind it yet. Still worth showing - it is a real route - but it is not a link, so it must not look like one. */ .icg-stream.is-inert{ cursor:default;background:transparent;border-style:dashed;box-shadow:none; } .icg-stream.is-inert:hover{transform:none;box-shadow:none;border-color:var(--line)} .icg-stream.is-inert .icg-stream-name{color:var(--ink-2);font-weight:600} .icg-stream-foot em{font-style:normal;color:var(--blue);font-weight:500} /* The score scale, stated once rather than left as unexplained numbers. */ .icg-streams-key{ display:flex;align-items:center;gap:16px;flex-wrap:wrap; margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2); font-family:var(--f-data);font-size:11px;color:var(--muted); } .icg-streams-key i{ width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:7px; } /* ============================================================ CATEGORIES — cards ============================================================ */ .icg-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .icg-cat{ display:flex;flex-direction:column; background:var(--card);border:1px solid var(--line);border-radius:16px; padding:20px;text-decoration:none; box-shadow:0 1px 1px rgba(19,27,46,.03); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .icg-cat:hover{ transform:translateY(-3px);border-color:#d5daea; box-shadow:0 2px 4px rgba(19,27,46,.04),0 18px 30px -20px rgba(19,27,46,.35); } .icg-cat-ico{ width:38px;height:38px;border-radius:11px;display:grid;place-items:center; background:var(--blue-soft);color:var(--blue);margin-bottom:16px; font-size:19px;line-height:1; font-family:"Segoe UI Emoji","Apple Color Emoji",var(--f-body); transition:background .2s ease,color .2s ease; } .icg-cat:hover .icg-cat-ico{background:var(--blue);color:#fff} .icg-cat-ico svg{width:19px;height:19px} .icg-cat h3{font-family:var(--f-display);font-size:16.5px;font-weight:700;letter-spacing:-.02em;margin:0 0 7px} .icg-cat p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--ink-2)} .icg-cat-foot{ margin-top:auto;padding-top:13px;border-top:1px solid var(--line-2); display:flex;align-items:center;justify-content:space-between; } .icg-cat-n{font-family:var(--f-data);font-size:11.5px;letter-spacing:.02em;color:var(--muted)} .icg-cat-n b{color:var(--ink);font-weight:600} .icg-cat-foot svg{width:15px;height:15px;color:var(--blue);transition:transform .2s ease} .icg-cat:hover .icg-cat-foot svg{transform:translateX(4px)} /* ============================================================ WHAT YOU CAN DO — ledger, deliberately not cards ============================================================ */ .icg-ledger{ display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); } .icg-item{ display:flex;gap:14px;padding:24px 24px 24px 0; border-bottom:1px solid var(--line); border-right:1px solid var(--line-2); text-decoration:none;transition:background .18s ease; } .icg-item:hover{background:#fbfaf7} .icg-item:nth-child(3n){border-right:0} .icg-item:not(:nth-child(3n+1)){padding-left:24px} .icg-item-ico{ width:34px;height:34px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center; border:1px solid var(--line);background:#fff;color:var(--blue); font-size:17px;line-height:1; font-family:"Segoe UI Emoji","Apple Color Emoji",var(--f-body); transition:border-color .18s ease,color .18s ease; } .icg-item:hover .icg-item-ico{border-color:rgba(27,63,196,.4)} .icg-item-ico svg{width:17px;height:17px} .icg-item-txt h3{font-family:var(--f-display);font-size:15px;font-weight:700;letter-spacing:-.018em;margin:1px 0 5px} .icg-item-txt p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)} .icg-item--soon{cursor:default} .icg-item--soon:hover{background:none} .icg-soon-tag{ display:inline-block;margin-top:7px;font-family:var(--f-data);font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 6px; } /* ---- Next steps block (shared partial, used on detail pages) ---- */ .icg-next{padding:56px 0;background:rgba(255,255,255,.86); border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .icg-next-in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)} .icg-next-head{max-width:44rem;margin-bottom:26px} .icg-next-head h2{font-family:var(--f-display);font-size:clamp(22px,2.6vw,30px);font-weight:800; letter-spacing:-.03em;line-height:1.12;margin:0 0 10px} .icg-next-head p{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2)} .icg-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .icg-next-grid a{display:flex;align-items:center;gap:13px;padding:18px;text-decoration:none; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 1px 1px rgba(19,27,46,.03); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} .icg-next-grid a:hover{transform:translateY(-2px);border-color:#d5daea; box-shadow:0 16px 28px -22px rgba(19,27,46,.4)} .icg-next-grid i{font-style:normal;display:grid;place-items:center;width:38px;height:38px; flex:0 0 auto;border-radius:11px;background:var(--blue-soft);color:var(--blue);font-size:17px; font-family:"Segoe UI Emoji","Apple Color Emoji",var(--f-body)} .icg-next-grid span{min-width:0} .icg-next-grid strong{display:block;font-family:var(--f-display);font-size:14.5px;font-weight:700; letter-spacing:-.018em;color:var(--ink)} .icg-next-grid small{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--muted)} .icg-next-grid b{margin-left:auto;flex:0 0 auto;color:var(--blue);font-size:16px; transition:transform .18s ease} .icg-next-grid a:hover b{transform:translateX(3px)} @media (max-width:900px){.icg-next-grid{grid-template-columns:1fr}} /* Four-across ledger variant. */ .icg-ledger--4{grid-template-columns:repeat(4,1fr)} .icg-ledger--4 .icg-item:nth-child(3n){border-right:1px solid var(--line-2)} .icg-ledger--4 .icg-item:nth-child(4n){border-right:0} .icg-ledger--4 .icg-item:not(:nth-child(4n+1)){padding-left:22px} .icg-ledger--4 .icg-item:nth-child(4n+1){padding-left:0} /* ============================================================ ADVISOR + TOOLS ============================================================ */ .icg-duo{display:grid;grid-template-columns:1.12fr .88fr;gap:20px;align-items:stretch} .icg-advisor{ position:relative;isolation:isolate;overflow:hidden; background:linear-gradient(160deg,#1a2338 0%,#111827 55%,#0e1526 100%); border-radius:20px;padding:30px 30px 26px;color:#fff; box-shadow:0 24px 50px -30px rgba(19,27,46,.9); } .icg-advisor::before{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none; background: radial-gradient(420px 200px at 88% 0%, rgba(43,86,232,.45), transparent 70%), radial-gradient(320px 180px at 5% 100%, rgba(14,138,95,.28), transparent 70%); } .icg-advisor::after{ content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5; background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(90% 70% at 20% 10%, #000, transparent 75%); mask-image:radial-gradient(90% 70% at 20% 10%, #000, transparent 75%); } .icg-adv-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:26px;align-items:start} .icg-adv-art{ position:relative;width:180px;flex:0 0 auto;border-radius:16px;overflow:hidden; background:radial-gradient(circle at 50% 40%, rgba(63,107,255,.28), rgba(14,21,38,0) 70%); } .icg-adv-art img{width:100%;height:auto;filter:drop-shadow(0 18px 26px rgba(0,0,0,.45))} .icg-adv-top{display:flex;align-items:center;gap:11px;margin-bottom:20px} .icg-bot{ position:relative;width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center; border-radius:11px;color:#fff;background:linear-gradient(145deg,#3f6bff,#1b3fc4); box-shadow:0 2px 8px -1px rgba(43,86,232,.7),inset 0 1px 0 rgba(255,255,255,.35); } .icg-bot svg{width:19px;height:19px;overflow:visible} .icg-bot::before{ content:"";position:absolute;inset:-4px;border-radius:14px;z-index:-1; background:radial-gradient(closest-side,rgba(63,107,255,.55),transparent 72%); animation:icg-breathe 3.6s ease-in-out infinite; } @keyframes icg-breathe{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:.8;transform:scale(1.1)}} .icg-eye{transform-box:fill-box;transform-origin:center;animation:icg-blink 5.4s ease-in-out infinite} .icg-eye--r{animation-delay:.07s} @keyframes icg-blink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.12)}} .icg-adv-tag{ font-family:var(--f-data);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase; color:#a8bcff;border:1px solid rgba(168,188,255,.3);border-radius:6px;padding:4px 8px; } .icg-advisor h2{ font-family:var(--f-display);font-size:clamp(23px,2.4vw,30px);font-weight:800; letter-spacing:-.03em;line-height:1.1;margin:0 0 12px; } .icg-adv-copy > p{margin:0 0 20px;font-size:15px;line-height:1.6;color:#c3c8d6;max-width:34rem} .icg-adv-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:9px} .icg-adv-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:#e4e7ef} .icg-adv-list svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:#5ce0a8} .icg-soon{ display:inline-flex;align-items:center;gap:9px; font-size:14.5px;font-weight:600;color:#c3c8d6; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16); border-radius:11px;padding:12px 18px;cursor:default; } .icg-soon i{width:7px;height:7px;border-radius:50%;background:#5ce0a8; box-shadow:0 0 0 3px rgba(92,224,168,.18)} .icg-adv-note{ margin:12px 0 0;font-family:var(--f-data);font-size:11px;letter-spacing:.02em;color:#8d93a5; } /* tools list */ .icg-tools{ background:var(--card);border:1px solid var(--line);border-radius:20px; padding:22px 22px 10px;box-shadow:0 1px 1px rgba(19,27,46,.03); } .icg-tools h2{ font-family:var(--f-display);font-size:17px;font-weight:700;letter-spacing:-.022em; margin:0 0 4px; } .icg-tools > p{margin:0 0 8px;font-family:var(--f-data);font-size:11px;letter-spacing:.02em;color:var(--muted)} .icg-tool{ display:flex;align-items:center;gap:13px;padding:15px 2px; border-top:1px solid var(--line-2);text-decoration:none; transition:padding-left .18s ease; } .icg-tool:hover{padding-left:6px} .icg-tool-ico{ width:32px;height:32px;flex:0 0 auto;border-radius:9px;display:grid;place-items:center; background:#f6f5f1;color:var(--blue);font-size:16px;line-height:1; font-family:"Segoe UI Emoji","Apple Color Emoji",var(--f-body); transition:background .18s ease,color .18s ease; } .icg-tool:hover .icg-tool-ico{background:var(--blue);color:#fff} .icg-tool-ico svg{width:16px;height:16px} .icg-tool-txt{min-width:0} .icg-tool-txt b{display:block;font-family:var(--f-display);font-size:14.5px;font-weight:700;letter-spacing:-.015em} .icg-tool-txt span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:2px} .icg-tool-go{margin-left:auto;width:15px;height:15px;color:var(--faint);flex:0 0 auto;transition:transform .18s ease,color .18s ease} .icg-tool:hover .icg-tool-go{color:var(--blue);transform:translateX(3px)} .icg-tool--soon{cursor:default;opacity:.66} .icg-tool--soon:hover{padding-left:2px} .icg-tool--soon:hover .icg-tool-ico{background:#f6f5f1;color:var(--blue)} .icg-tool-soon{margin-left:auto;font-family:var(--f-data);font-size:9.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:3px 6px;white-space:nowrap} /* ============================================================ UPDATES RAIL ============================================================ */ .icg-rail{ display:grid;grid-auto-flow:column;grid-auto-columns:minmax(290px,calc((100% - 32px)/3)); gap:16px;overflow-x:auto;padding:2px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:thin; } .icg-upd{ display:grid;grid-template-rows:auto 1fr;overflow:hidden;scroll-snap-align:start; background:var(--card);border:1px solid var(--line);border-radius:16px;text-decoration:none; box-shadow:0 1px 1px rgba(19,27,46,.03); transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; } .icg-upd:hover{transform:translateY(-3px);border-color:#d5daea; box-shadow:0 2px 4px rgba(19,27,46,.04),0 18px 30px -20px rgba(19,27,46,.35)} .icg-upd-img{height:150px;background:#f2f0ea;overflow:hidden} .icg-upd-img img{width:100%;height:100%;object-fit:cover} .icg-upd-body{padding:18px} .icg-upd-meta{display:flex;align-items:center;gap:8px;margin-bottom:11px; font-family:var(--f-data);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .icg-upd-meta span{background:rgba(14,138,95,.08);color:var(--verify);border-radius:5px;padding:3px 6px;font-weight:600} .icg-upd-meta em{font-style:normal;color:var(--saffron);font-weight:600} .icg-upd-meta time{margin-left:auto} .icg-upd h3{font-family:var(--f-display);font-size:15.5px;font-weight:700;letter-spacing:-.018em; line-height:1.3;margin:0 0 8px;color:var(--ink)} .icg-upd p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted); display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .icg-upd-when{display:block;margin-top:10px;font-family:var(--f-data);font-size:11px;color:var(--ink-2)} .icg-rail-nav{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto} .icg-rail-nav button{ width:34px;height:34px;display:grid;place-items:center;cursor:pointer; background:#fff;border:1px solid var(--line);border-radius:9px;color:var(--ink); transition:border-color .16s ease,background .16s ease; } .icg-rail-nav button:hover{border-color:#cfd6ea;background:#f4f2ec} .icg-rail-nav svg{width:15px;height:15px} /* ============================================================ STATS ============================================================ */ .icg-stats{ display:grid;grid-template-columns:repeat(5,1fr); background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden; } .icg-stat{padding:24px 22px;border-right:1px solid var(--line-2)} .icg-stat:last-child{border-right:0} .icg-stat b{ display:block;font-family:var(--f-display);font-size:clamp(24px,2.6vw,32px);font-weight:800; letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums; } .icg-stat span{ display:block;margin-top:8px;font-family:var(--f-data);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--muted); } .icg-stats-note{margin:12px 0 0;font-family:var(--f-data);font-size:10.5px;color:var(--faint)} /* ============================================================ FOOTER ============================================================ */ .icg-foot{background:var(--card);border-top:1px solid var(--line);padding:52px 0 30px;margin-top:0} .icg-foot-visual{padding:0 0 40px} .icg-foot-visual img{width:100%;height:auto;border-radius:16px;border:1px solid var(--line)} .icg-foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px} .icg-foot-brand p{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:24rem} .icg-foot h4{ font-family:var(--f-data);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase; color:var(--muted);margin:6px 0 14px; } .icg-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .icg-foot ul a{font-size:14px;color:var(--ink-2);text-decoration:none;transition:color .16s ease} .icg-foot ul a:hover{color:var(--blue)} .icg-foot ul span{font-size:14px;color:var(--faint)} .icg-foot-base{ margin-top:38px;padding-top:18px;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; font-family:var(--f-data);font-size:11px;color:var(--faint); } .icg-foot-base nav{display:flex;flex-wrap:wrap;gap:14px} .icg-foot-base nav a:hover{color:var(--blue)} /* ============================================================ REVEAL + RESPONSIVE + MOTION FLOOR ============================================================ */ .icg-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.24,1)} .icg-reveal.is-seen{opacity:1;transform:none} @media (max-width:1080px){ .icg-hero-wrap{grid-template-columns:1fr;gap:40px} .icg-sub{max-width:none} .icg-hero::after{display:none} .icg-duo{grid-template-columns:1fr} .icg-cats{grid-template-columns:repeat(2,1fr)} .icg-streams{grid-template-columns:repeat(2,1fr)} .icg-ledger,.icg-ledger--4{grid-template-columns:repeat(2,1fr)} .icg-item,.icg-ledger--4 .icg-item{border-right:1px solid var(--line-2);padding-left:24px} .icg-item:nth-child(2n),.icg-ledger--4 .icg-item:nth-child(2n){border-right:0} .icg-item:nth-child(2n+1),.icg-ledger--4 .icg-item:nth-child(2n+1){padding-left:0} .icg-stats{grid-template-columns:repeat(3,1fr)} .icg-stat:nth-child(3){border-right:0} .icg-stat:nth-child(n+4){border-top:1px solid var(--line-2)} .icg-foot-in{grid-template-columns:1fr 1fr 1fr} } @media (max-width:820px){ /* two stacked bars is too much to pin on a phone */ .icg-top{position:static} .icg-search{display:none} .icg-nav-in{overflow-x:auto;scrollbar-width:none;gap:2px} .icg-nav-in::-webkit-scrollbar{display:none} .icg-nav .icg-nav-cta{margin-left:8px} .icg-nav a[aria-current="page"]::after{bottom:-13px} .icg-util small{display:none} .icg-adv-grid{grid-template-columns:1fr} .icg-adv-art{width:150px;margin:0 auto} .icg-top-in{height:84px;gap:16px} .icg-logo{--logo-h:64px} } @media (max-width:640px){ :root{--gut:16px} .icg-band{padding:52px 0} .icg-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:26px} .icg-more{margin-left:0} .icg-rail-nav{margin-left:0} .icg-hero{padding:40px var(--gut) 48px} .icg-panel{padding:16px 14px 12px;border-radius:16px} .icg-route-top{flex-wrap:wrap;gap:8px} .icg-pay{margin-left:0;width:100%} .icg-pay small{text-align:left} .icg-stations{gap:8px} .icg-what{font-size:11.5px} .icg-cta{width:100%;justify-content:center} .icg-cats{grid-template-columns:1fr} .icg-streams{grid-template-columns:1fr} .icg-ledger,.icg-ledger--4{grid-template-columns:1fr} .icg-item,.icg-ledger--4 .icg-item{padding:20px 0;border-right:0;padding-left:0} .icg-item:not(:nth-child(3n+1)),.icg-ledger--4 .icg-item:not(:nth-child(4n+1)){padding-left:0} .icg-stats{grid-template-columns:repeat(2,1fr)} .icg-stat{padding:18px 16px;border-right:1px solid var(--line-2);border-top:1px solid var(--line-2)} .icg-stat:nth-child(2n){border-right:0} .icg-stat:nth-child(-n+2){border-top:0} .icg-stat:last-child{grid-column:1 / -1;border-right:0} .icg-advisor{padding:24px 20px 22px;border-radius:16px} .icg-tools{padding:18px 16px 8px;border-radius:16px} .icg-foot-in{grid-template-columns:1fr;gap:26px} .icg-rail{grid-auto-columns:minmax(260px,86vw)} .icg-utils{gap:2px} .icg-util b{font-size:12px} .icg-top-in{height:72px} .icg-logo{--logo-h:52px} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition:none!important;animation:none!important} .icg-track-line{transform:scaleX(1)} .icg-dot{opacity:1;transform:scale(1)} .icg-reveal{opacity:1;transform:none} }