/* ============================================================================
DICKSON | 周恩來 — Private AI, Strategy & Training
----------------------------------------------------------------------------
HOW THIS STYLESHEET WORKS — read this before changing sizes.
The design comes from ref-jade.jpg, a fixed 1280px-wide comp. Rather than
redrawing that comp at each screen size, the layout SCALES: the page at
900px wide is the 1280px page at ~70%, not a different arrangement.
That is done with the pattern:
clamp(FLOOR, VW-SHARE, COMP-VALUE)
COMP-VALUE the measurement straight off the 1280px comp
VW-SHARE that value as a % of 1280, written in vw
e.g. 126px on a 1280px comp -> 126/1280 = 9.84vw
FLOOR the same value at 861px, i.e. VW-SHARE x 8.61
e.g. 9.84 x 8.61 = 84px
So: at 1280px and wider you get the comp value exactly. Between 1280px and
861px everything shrinks together. At 861px every value hits its floor,
which is the moment the stacked layout takes over.
TO CHANGE A SIZE, edit the third number (the comp value), then recompute
the other two: vw = comp / 12.8 floor = vw x 8.61
If you only edit one of the three the layout will jump at some width.
BREAKPOINTS
(none above) 1280px+ comp reproduced exactly, centred
861-1279px the comp, scaled proportionally — no rearrangement
<= 860px STACKED: artwork drops below the copy, cards go 2-up
<= 620px cards go 1-up
<= 480px small-phone type sizes
GOTCHAS
- Social icon colours live inside the SVG files (assets/*.svg), NOT here.
They load via ![]()
, so CSS `fill` cannot reach them.
- .hero-title and .card-heading are `white-space: nowrap` on
purpose. Their line breaks are explicit
s in the HTML; nowrap
honours those while preventing any extra wrap. See notes at each rule.
- Type sizes below ~14px are floors, not design intent — they are what
proportional scaling produces at 861px.
============================================================================ */
:root {
/* Brand palette. The green is specified in spec.md. */
--green: #00ad6e;
--white: #ffffff;
--black: #000000;
--page: 1280px; /* design width of ref-jade.jpg; content never exceeds this */
/* Horizontal gutters. Each is clamp(floor, vw-share, comp-value) — see the
header. Note the three sections have DIFFERENT gutters in the comp; that
is intentional, not an inconsistency. */
--nav-pad-x: clamp(50px, 5.86vw, 75px); /* 75px on the comp */
--hero-pad-x: clamp(84px, 9.84vw, 126px); /* 126px — hero copy sits further in */
--panel-inset: clamp(32px, 3.75vw, 48px); /* 48px — green margin beside the white panel */
}
/* ========================================
Reset & Base
======================================== */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: "Rubik", sans-serif;
/* Green on so it fills the viewport below short content. The white
value-prop panel is a block sitting on top of this, not a section bg. */
background-color: var(--green);
color: var(--black);
line-height: 1.6;
/* Contains the CTA artwork, which deliberately bleeds off the left edge. */
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
/* ========================================
Navigation
---------------------------------------
Five items spread edge to edge with the logotype centred. In normal flow,
NOT fixed — the comp shows it this way, and a ~190px fixed bar would eat
too much of a laptop viewport.
======================================== */
.navbar {
background-color: var(--green);
}
.nav-inner {
max-width: var(--page);
margin: 0 auto;
padding: clamp(58px, 6.72vw, 86px) var(--nav-pad-x) clamp(16px, 1.88vw, 24px);
display: flex;
/* space-between across all five children is what spreads the links out to
match the comp — don't swap this for fixed gaps. */
justify-content: space-between;
/* flex-start so the links align with the DICKSON line, not the centre of
the taller two-line logo block. */
align-items: flex-start;
gap: 24px;
}
.nav-link {
font-family: "Belleza", sans-serif; /* spec.md: Belleza 14, letter-spacing 2 */
font-weight: 400;
font-size: 14px;
letter-spacing: 2px;
line-height: 1;
color: var(--white);
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
transition: opacity 0.3s ease;
}
.nav-link:hover {
opacity: 0.7;
}
.logo-container {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(15px, 1.72vw, 22px);
flex-shrink: 0;
}
.logo-container a {
text-decoration: none;
}
/* Both logotypes are white-filled inside their SVG files. The Chinese mark's
SVG declares width="100%" and so has no usable intrinsic ratio — it needs a
real height (here `auto` works only because the width is explicit and the
file carries a viewBox). If it ever collapses, set an explicit height. */
.logo-en {
width: clamp(116px, 13.44vw, 172px); /* 172px on the comp */
height: auto;
}
.logo-cn {
width: clamp(85px, 9.84vw, 126px); /* 126px on the comp */
height: auto;
}
/* ========================================
Hero
---------------------------------------
Copy on the left, artwork absolutely positioned on the right. Absolute
positioning is what reproduces the comp exactly — the artwork overlaps the
copy column slightly, which is fine because the PNG has empty margins.
======================================== */
.hero {
position: relative;
}
.hero-inner {
position: relative;
max-width: var(--page);
margin: 0 auto;
/* top 182px / bottom 136px on the comp */
padding: clamp(122px, 14.22vw, 182px) var(--hero-pad-x) clamp(91px, 10.63vw, 136px);
/* Holds the green field open behind the absolutely-positioned artwork,
which contributes no height of its own. */
min-height: clamp(512px, 59.6vw, 763px);
}
.hero-content {
position: relative;
z-index: 1; /* keeps the copy above the overlapping artwork */
max-width: clamp(316px, 36.72vw, 470px);
}
.hero-title {
font-family: "Bodoni Moda", serif; /* spec.md: Bodoni Moda 69, letter-spacing 3 */
/* Bodoni Moda is variable on an optical-size axis. Left on `auto` it would
use opsz 69 here, whose hairlines are far finer than the comp. Pinning it
low thickens the strokes to match. */
font-variation-settings: "opsz" 14;
font-weight: 400;
font-size: clamp(46px, 5.39vw, 69px); /* 69px on the comp */
letter-spacing: 3px;
line-height: 1;
color: var(--white);
/* The three lines are explicit
s in the HTML. nowrap still breaks at
those, but stops "& TRAINING" wrapping again once the column narrows —
without it the "&" drops onto a line of its own around 1024px. */
white-space: nowrap;
}
.hero-subtitle {
font-family: "Rubik", sans-serif; /* spec.md: Rubik 19, letter-spacing 2, weight 300 */
font-weight: 300;
font-size: clamp(16px, 1.48vw, 19px);
letter-spacing: 2px;
line-height: 1.45;
color: var(--white);
max-width: clamp(269px, 31.25vw, 400px);
margin-top: clamp(28px, 3.28vw, 42px);
}
/* spec.md calls for 676x676. Note the source PNG is only 629x629, so it is
being upscaled — re-export it larger if it looks soft. */
.hero-image {
position: absolute;
top: -8px;
right: clamp(27px, 3.13vw, 40px);
width: clamp(454px, 52.81vw, 676px); /* 676px on the comp */
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
/* ========================================
Cards (home value props + case-study gallery)
---------------------------------------
A white panel inset on the green field (NOT a full-bleed white section),
holding a 3 x 2 card grid.
======================================== */
/* The white block inset on the green field. Shared by all three pages:
the home value-prop grid, the case-study gallery and the case-study
article. .panel-band is the green surround, .panel the white block. */
.panel-band {
background-color: var(--green);
padding: 0 var(--panel-inset); /* the green margin either side of the panel */
}
/* Add to the last .panel-band on a page, where the panel would otherwise sit
almost flush against the footer. Not needed on the home page, where the CTA
section provides that space. */
.panel-band-end {
padding-bottom: clamp(60px, 7.03vw, 90px);
}
.panel {
max-width: calc(var(--page) - (var(--panel-inset) * 2));
margin: 0 auto;
background-color: var(--white);
/* Vertical: comp measures 65 top / 88 bottom, averaged to 76 both.
Horizontal: the side padding and the card grid's column gap are
deliberately the SAME value, so cards are evenly distributed — outer
margins read as tight as the gutters between them. 57px is chosen because
4 x 57 is what the comp's 50/64 split consumed in total, so cards keep
their 318px width. Change this and .card-grid's column-gap together. */
padding: clamp(51px, 5.94vw, 76px) clamp(38px, 4.45vw, 57px);
}
/* Rows of three cards. Used by the home page and the case-study gallery. */
.card-grid {
display: grid;
/* minmax(0, 1fr) rather than a fixed 318px so the columns can shrink; at
1280px this resolves to ~318px anyway, matching the comp. */
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: clamp(38px, 4.45vw, 57px); /* must match .panel's side padding */
row-gap: clamp(64px, 7.5vw, 96px);
}
/* Heading -> image -> copy, in that order. Because every heading is exactly
two lines, the images line up across a row automatically. */
.card {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.card-heading {
font-family: "Bodoni Moda", serif; /* spec.md: Bodoni Moda 29, line-height 1, letter-spacing 1 */
font-variation-settings: "opsz" 12; /* see .hero-title for why */
font-weight: 500;
font-size: clamp(19px, 2.27vw, 29px); /* 29px on the comp */
letter-spacing: 1px;
line-height: 1; /* per spec.md — do not raise, it breaks the comp's rhythm */
color: var(--black);
margin-bottom: clamp(22px, 2.58vw, 33px);
/* Reserve two lines even for a one-line title (line-height is 1, so 2em is
exactly two lines). Without this a short title like "PULSE" pulls its
image up out of line with the rest of its row. */
min-height: 2em;
/* Line breaks are explicit
s. Without nowrap, "DESIGN-THINKING" also
breaks at its hyphen once the column narrows, giving that one card a
three-line heading and pushing its image out of line with its row. */
white-space: nowrap;
}
/* spec.md: 318x250. Width is fluid; the cap holds it to the comp size. */
.card-img {
width: 100%;
max-width: 318px;
height: auto;
aspect-ratio: 318 / 250;
object-fit: cover;
margin-bottom: clamp(17px, 1.95vw, 25px);
}
.card-text {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: clamp(14px, 1.33vw, 17px);
letter-spacing: 1px; /* the comp's copy is tracked out — this drives the wrap */
line-height: 1.5;
color: var(--black);
max-width: clamp(193px, 22.42vw, 287px); /* slightly narrower than the image, as on the comp */
}
/* ========================================
Call to Action
---------------------------------------
Mirror of the hero: artwork on the left (bleeding off the viewport edge),
copy on the right.
======================================== */
.cta {
background-color: var(--green);
overflow: hidden; /* clips the bleeding artwork */
}
.cta-inner {
position: relative;
max-width: var(--page);
margin: 0 auto;
/* The large left padding (697px on the comp) is what places the copy
column; the artwork is positioned independently, underneath it. */
padding: clamp(268px, 31.25vw, 400px) clamp(50px, 5.86vw, 75px)
clamp(134px, 15.63vw, 200px) clamp(468px, 54.45vw, 697px);
min-height: clamp(672px, 78.13vw, 1000px);
}
/* Bleeds off the LEFT edge, as in the comp. `right` is measured from the
container's right edge, so this pins the artwork's right edge at 656px and
lets the rest run off-screen. */
.cta-image {
position: absolute;
top: 30px;
right: calc(100% - clamp(440px, 51.25vw, 656px));
width: clamp(631px, 73.44vw, 940px); /* larger than the hero artwork, per the comp */
height: auto;
aspect-ratio: 1;
object-fit: contain;
}
.cta-content {
position: relative;
z-index: 1;
max-width: clamp(248px, 28.91vw, 370px);
}
.cta-title {
font-family: "Bodoni Moda", serif;
font-variation-settings: "opsz" 12;
font-weight: 500;
font-size: clamp(24px, 3vw, 36px);
letter-spacing: 1px;
line-height: 1;
color: var(--white);
margin-bottom: clamp(22px, 2.58vw, 33px);
white-space: nowrap;
min-height: 3em;
}
.cta-text {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: clamp(16px, 1.48vw, 19px);
letter-spacing: 2px;
line-height: 1.45;
color: var(--white);
}
.cta-links {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
margin-top: clamp(38px, 4.38vw, 56px);
flex-wrap: nowrap;
}
/* EMAIL US / BOOK A DEMO. Rubik to match the paragraph above them — the comp
does NOT set these in Belleza like the nav links. */
.cta-link {
font-family: "Rubik", sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.48vw, 19px);
letter-spacing: 2px;
line-height: 1;
color: var(--white);
text-decoration: none;
transition: opacity 0.3s ease;
white-space: nowrap;
}
.cta-link:hover {
opacity: 0.7;
}
.cta-email-separator {
color: var(--white);
}
.cta-email {
font-family: "Rubik", sans-serif;
font-weight: 400;
font-size: clamp(16px, 1.48vw, 19px);
letter-spacing: 2px;
line-height: 1.45;
color: var(--white);
white-space: nowrap;
}
/* Social Links
NOTE: icon colours are baked into the SVG files, not set here. LinkedIn and
GitHub carry fill="#ffffff"; Hugging Face uses the full-colour hf-logo.svg.
Setting `fill` in CSS does nothing — they are ![]()
, not inline SVG. */
.social-links {
display: flex;
align-items: center;
gap: clamp(29px, 3.36vw, 43px);
margin-top: clamp(39px, 4.53vw, 58px);
}
.social-link {
display: block;
transition: opacity 0.3s ease;
}
.social-link:hover {
opacity: 0.75;
}
.social-icon {
width: clamp(32px, 3.67vw, 43px); /* 43px on the comp */
height: clamp(32px, 3.67vw, 43px);
}
/* ========================================
Footer
======================================== */
.footer {
background-color: var(--green);
padding: 0 40px clamp(31px, 3.59vw, 46px);
text-align: center;
}
.footer-text {
font-family: "Belleza", sans-serif;
font-size: 13px; /* comp value 11px, scaled up ~20% on request */
font-weight: 400;
letter-spacing: 2px;
color: var(--white);
text-transform: uppercase;
}
/* ========================================
Sub-page header (case-studies pages)
---------------------------------------
A shorter green band than the home hero: nav, then a title and one line of
intro. No artwork, so these pages open straight onto content.
======================================== */
.page-head {
max-width: var(--page);
margin: 0 auto;
padding: clamp(60px, 7.03vw, 90px) var(--hero-pad-x) clamp(60px, 7.03vw, 90px);
}
.page-title {
font-family: "Bodoni Moda", serif;
font-variation-settings: "opsz" 14;
font-weight: 400;
font-size: clamp(46px, 5.39vw, 69px); /* same scale as the home hero title */
letter-spacing: 3px;
line-height: 1;
color: var(--white);
}
.page-intro {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: clamp(16px, 1.48vw, 19px);
letter-spacing: 2px;
line-height: 1.45;
color: var(--white);
max-width: clamp(354px, 41.1vw, 526px);
margin-top: clamp(20px, 2.34vw, 30px);
}
/* ========================================
Case-study gallery
---------------------------------------
Reuses .panel + .card-grid + .card from the home page, so a gallery card is
laid out exactly like a value-prop card. The only additions are the link
behaviour and the small meta line above each title.
======================================== */
.case-card {
text-decoration: none;
color: inherit;
}
.case-card .card-img {
transition: opacity 0.3s ease;
}
.case-card:hover .card-img {
opacity: 0.82;
}
.case-card:hover .card-heading {
opacity: 0.7;
}
/* Small label above a card title — client, year, discipline, whatever suits. */
.case-label {
font-family: "Belleza", sans-serif;
font-size: 12px;
letter-spacing: 2px;
line-height: 1.4;
text-transform: uppercase;
color: var(--green);
margin-bottom: 10px;
/* Reserve two lines, for the same reason .card-heading does: a long label
wraps once the column narrows, and a card whose label wraps would push its
heading and image down out of line with the rest of its row. 2.8em is two
lines at the line-height above. */
min-height: 2.8em;
}
/* ========================================
Case-study article
---------------------------------------
Long-form reading, so everything sits in one centred measure inside the
white panel. Order: banner -> title -> credits + lede -> sections.
======================================== */
/* Full-width banner sitting on the green, above the panel. */
.cs-banner {
max-width: var(--page);
margin: 0 auto;
padding: 60px var(--hero-pad-x) clamp(60px, 7.03vw, 90px);
}
.cs-banner img {
width: 100%;
height: auto;
aspect-ratio: 16 / 7;
object-fit: cover;
}
/* The reading column. Everything in the article is constrained to this. */
.cs-wrap {
max-width: 860px;
margin: 0 auto;
}
.cs-title {
font-family: "Bodoni Moda", serif;
font-variation-settings: "opsz" 14;
font-weight: 400;
font-size: clamp(58px, 6.8vw, 87px); /* another 10% smaller */
letter-spacing: 2px;
line-height: 1.05;
color: var(--black);
}
/* Credits column beside the opening paragraph, as on the reference layout. */
.cs-lede {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: clamp(28px, 3.13vw, 40px);
margin-top: clamp(36px, 3.91vw, 50px);
padding-bottom: clamp(36px, 3.91vw, 50px);
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.cs-credits {
font-family: "Rubik", sans-serif;
font-weight: 400;
font-size: 15px;
line-height: 1.7;
color: var(--black);
list-style: none;
}
.cs-intro {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: clamp(16px, 1.48vw, 19px);
line-height: 1.6;
color: var(--black);
}
.cs-section {
margin-top: clamp(44px, 4.69vw, 60px);
}
.cs-heading {
font-family: "Bodoni Moda", serif;
font-variation-settings: "opsz" 12;
font-weight: 500;
font-size: clamp(22px, 2.27vw, 29px);
letter-spacing: 1px;
line-height: 1.15;
color: var(--black);
margin-top: clamp(28px, 3vw, 40px);
margin-bottom: clamp(14px, 1.56vw, 20px);
/* NOT nowrap, unlike the home-page card headings — these are written as
sentences and are meant to wrap naturally. */
}
.cs-body {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: 20px;
line-height: 1.7;
color: var(--black);
}
ol.cs-body,
ul.cs-body {
padding-left: clamp(24px, 2vw, 32px);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
ol.cs-body li,
ul.cs-body li {
margin-bottom: 0.5em;
}
.cs-body + .cs-body {
margin-top: 1.2em;
}
/* Image with a caption under it. Sits inside the reading column. */
.cs-figure {
margin: clamp(36px, 3.91vw, 50px) 0;
}
.cs-figure img {
width: 100%;
height: auto;
}
.cs-caption {
font-family: "Rubik", sans-serif;
font-weight: 300;
font-size: 14px;
line-height: 1.5;
color: #555555;
margin-top: 12px;
text-align: center;
}
/* Back to the gallery. */
.cs-back {
display: inline-block;
margin-top: clamp(44px, 4.69vw, 60px);
font-family: "Belleza", sans-serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--black);
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
transition: opacity 0.3s ease;
}
.cs-back:hover {
opacity: 0.6;
}
/* ============================================================================
Responsive
----------------------------------------------------------------------------
Everything above scales smoothly from 1280px down to 861px. The rules below
only handle what happens once that is no longer viable.
============================================================================ */
/* ---- <= 860px: the composition breaks apart ------------------------------
Above this width the comp simply scales; there is deliberately NO
intermediate arrangement between here and 1280px. Adding one is what made
the layout visibly jump at in-between widths.
Here everything changes at once: both absolutely-positioned artworks return
to normal flow beneath their copy, the sections become single-column grids
and centre their contents, and the card grid drops to two columns.
-------------------------------------------------------------------------- */
@media screen and (max-width: 860px) {
/* Logo moves onto its own line above the links, which wrap and centre. */
.nav-inner {
flex-wrap: wrap;
justify-content: center;
padding: 28px 20px 20px;
gap: 20px 28px;
}
.logo-container {
order: -1;
flex-basis: 100%;
gap: 14px;
}
.nav-link {
font-size: 12px;
}
.hero-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 48px 24px 64px;
gap: 36px;
min-height: 0; /* content sets the height now */
align-items: center;
justify-items: center;
text-align: center;
}
.hero-content {
max-width: none;
}
.hero-title {
font-size: 42px;
letter-spacing: 2px;
/* Wrapping is allowed again: the type is small enough that the comp's
three-line break no longer needs protecting. */
white-space: normal;
}
/* Held to a readable measure and centred, rather than running the full
width of the stacked column. */
.hero-subtitle {
font-size: 17px;
max-width: 420px;
margin: 28px auto 0;
}
.hero-image {
position: static; /* back into the flow, below the copy */
width: 100%;
max-width: 600px;
height: auto;
aspect-ratio: 1;
}
.panel-band {
padding: 0 20px;
}
/* Two columns, not one — the panel is still wide enough here, and going
single column this early strands each card's content against the left
edge. One column takes over at 620px. */
.card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
/* Side padding matches the gap here too, so the two cards sit evenly. */
column-gap: 35px;
row-gap: 56px;
padding: 52px 35px;
}
/* Off the comp's fixed grid the column is wider than the comp's 318px /
287px caps, so both take the column measure instead and their edges stay
aligned. Without this the image and copy sit on different widths. */
.card-img {
width: 100%;
max-width: none;
height: auto;
aspect-ratio: 318 / 250;
}
.card-text {
max-width: none;
}
.cta-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 64px 24px 72px;
gap: 40px;
min-height: 0;
align-items: center;
justify-items: center;
text-align: center;
}
.cta-image {
position: static;
width: 100%;
max-width: 500px;
height: auto;
aspect-ratio: 1;
}
.cta-content {
display: flex;
flex-direction: column;
align-items: center;
max-width: none;
}
/* Same measure as .hero-subtitle above — held to a readable column and
centred, rather than running the full width of the stacked section. */
.cta-text {
font-size: 17px;
max-width: 420px;
}
.cta-links {
align-items: center;
margin-top: 40px;
}
.social-links {
margin-top: 56px;
}
.page-head {
padding: 40px 24px 48px;
text-align: center;
}
.page-intro {
max-width: 420px;
margin: 24px auto 0;
}
.cs-banner {
padding: 20px 20px 48px;
}
/* Credits stack above the opening paragraph rather than beside it. */
.cs-lede {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
}
.footer {
padding: 0 20px 32px;
}
}
/* ---- <= 620px: cards go single column --------------------------------------
Only now is there too little width for two cards side by side. The image and
copy fill the column (caps already removed above) so nothing is stranded.
-------------------------------------------------------------------------- */
@media screen and (max-width: 620px) {
.card-grid {
grid-template-columns: minmax(0, 1fr);
row-gap: 52px;
}
}
/* ---- <= 480px: small-phone type sizes -------------------------------------- */
@media screen and (max-width: 480px) {
.hero-title {
font-size: 34px;
}
.page-title {
font-size: 34px;
}
.cs-title {
font-size: 48px;
}
.card-heading {
font-size: 24px;
}
.social-links {
gap: 32px;
}
}
/* ========================================
Accessibility
======================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* currentColor so the ring is visible on both the green and white sections —
a fixed white outline disappears against the value-prop panel. */
a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
}