/* A BLOCK, NOT A BAND: held to a width and ruled on all four sides, it
reads as a card laid on the page rather than one more stripe. The outer
element is the gutter and the paper; the frame and grey are on the box.
THE PAPER IS WHITE ON EVERY PAGE. Transparent, it took whatever surface
it landed on -- warm on Chowa Box and Contact, white on the home page --
so the block read as a different object on each.
IT MEASURES ITSELF OFF THE SITE'S OWN GRID, not a width typed here.
home-sections.css declares the two numbers every other section is built
from: hs-measure, the content column, and hs-gutter beside it. A stated
1320 hung past the grids above and below by eight pixels a side here and
a different amount everywhere else. */
html body #app .bx-band {
box-sizing: border-box;
padding: 56px var(--hs-gutter, 40px);
background: #ffffff;
}
/* TWO EQUAL HALVES, SO THE TYPE STARTS ON THE PAGE'S CENTRE LINE. The block
is centred and its padding equal on both sides, so the line between the
columns falls on the middle of the page -- and with no gutter, every line
of type in the right half begins on it. The drawing has the left half.
Ranged left off a known line reads as a layout; centred, as a poster.
THE FRAME IS ONE COLOUR: grey, white, grey, a white line cut three
pixels in from the panel's own edge and nothing darker anywhere. A
separate darker rule sat outside this and read as a second, competing
edge. Two inset shadows, no extra element -- white laid six deep, grey
listed first and so painted back over its outer three. Both inline
beside the background, so they follow its colour. */
html body #app .bx-wrap {
box-sizing: border-box;
max-width: var(--hs-measure, 1180px);
margin: 0 auto;
padding: 72px 64px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
align-items: center;
}
/* EACH LINE HAS TO SAY IT ITSELF. The Chowa Box template centres text on
the whole section and its page CSS centres these elements directly, so
inheriting left from the column is not enough -- the heading and the
paragraphs came out centred there while the button, being inline-flex,
stayed where it was, which read as a mistake because it was one. */
html body #app .bx-say,
html body #app .bx-say p,
html body #app .bx-say h2 { text-align: left !important; }
html body #app .bx-say { min-width: 0; }
/* Sized by a ceiling rather than by its column, so it reads as a drawing
beside the words instead of a product shot in front of them. --f-mono is
the face the dimension figures are set in; their chips are literal white,
so they hold whatever colour the block is changed to. */
html body #app .bx-art {
display: block;
width: 100%;
max-width: 264px;
height: auto;
margin: 0 auto;
overflow: visible;
--f-mono: 'into-mono', ui-monospace, monospace;
}
/* The deep indigo of the heading, not the lighter link blue used elsewhere
for small buttons: in a block this quiet the two read as two systems. */
html body #app .bx-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
box-sizing: border-box;
margin: 0;
padding: 17px 30px;
border: 1px solid #002F50;
border-radius: 0;
background: #002F50;
color: #ffffff !important;
text-decoration: none;
font-family: 'into-mono', monospace !important;
font-size: 9px !important;
line-height: 1 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
html body #app .bx-btn span {
font-family: 'into-mono', monospace !important;
font-size: 9px !important;
line-height: 1 !important;
letter-spacing: 0.18em !important;
color: inherit !important;
}
html body #app .bx-arrow {
font-size: 9px !important;
letter-spacing: 0 !important;
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (hover: hover) {
html body #app .bx-btn:hover {
background: #ffffff;
color: #002F50 !important;
}
html body #app .bx-btn:hover .bx-arrow { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
html body #app .bx-arrow { transition: none; }
}
/* NO ANGLE BRACKETS IN HERE. This CSS lives inside an HTML template, so the
browser parses it as markup first -- an anchor tag written out in a
comment was read as a real tag and swallowed every rule after it: the
link lost its colour and the whole phone layout never applied. Describe
elements in words.
The rule is needed: style.css sizes bare links at 4.6rem above 60em, so
one silent about its type arrives at 73px -- this line was 390px tall.
Link and visited are named so no browser default colours them. */
html body #app .bx-alt a,
html body #app .bx-alt a:link,
html body #app .bx-alt a:visited,
html body #app .bx-alt a:active {
font-family: 'into-mono', monospace !important;
font-size: 9px !important;
line-height: 1.7 !important;
letter-spacing: 0.06em !important;
color: #3b647c !important;
text-decoration: none;
border-bottom: 1px solid rgba(59, 100, 124, 0.4);
padding-bottom: 1px;
}
html body #app .bx-btn:link,
html body #app .bx-btn:visited,
html body #app .bx-btn:active { color: #ffffff !important; }
@media (hover: hover) {
html body #app .bx-alt a:hover { color: #002F50 !important; border-bottom-color: #002F50; }
html body #app .bx-btn:hover { color: #002F50 !important; }
}
@media screen and (max-width: 60em) {
html body #app .bx-band { padding-top: 32px; padding-bottom: 32px; }
html body #app .bx-wrap {
grid-template-columns: minmax(0, 1fr);
gap: 22px;
padding: 40px 24px;
justify-items: start;
}
html body #app .bx-art { max-width: 208px; margin: 0; }
html body #app .bx-say h2 { font-size: 24px !important; }
html body #app .bx-btn {
padding: 15px 22px;
gap: 10px;
font-size: 9px !important;
letter-spacing: 0.14em !important;
}
html body #app .bx-btn span {
font-size: 9px !important;
letter-spacing: 0.14em !important;
}
html body #app .bx-arrow { font-size: 8px !important; }
}
Made to order · Nothing is bought here
Bespoke Chowa Box Estimate Calculator
Design your own box in about a minute, and leave with an estimate you can keep.