@charset "UTF-8"; /* ========================================================================== TWSS_styles_006.css - www.toptronicwebsites.com (part 6: the FEATURES page, the data half and the business half, and the right-to-left overrides) Generated/Updated on: 2026-09-16T18:06:36+10:00 Build Number: 005 Version Number: (set manually by Jacques) © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited. For copyright inquiries: jacques@toptronic.com WHAT IS IT The second half of the look of the FEATURES page. File 005 paints the shell of the page and the controls; this file paints the parts that show DATA and the parts that show the BUSINESS behind the site: 1 sortable table 2 chart and drawn picture 3 gallery and lightbox 4 before/after 5 timeline and plans reuse 6 nine languages 7 price in money 8 chat window 9 booking calendar 10 newsletter 11 a LIGHT panel (a light island in a dark page) 12 Arabic (right to left) 13 printing (the demonstration blocks). HOW IT STAYS HONEST It loads AFTER files 001-005 on every page, so it must not restyle anything they already own: every rule starts with an ft- class from section 6 of the contract (TWSS_Contract_0098.md). Every colour and distance is a token from file 001 (--ink-3, --line-dk, --r-2, --sp-4...): no colour is invented, and the display font (Archivo) is only ever asked for weight 700, because that is the only weight the file holds; the text font (Inter) does the rest. WHY EVERY SIDE IS LOGICAL There is no "left" and no "right" in this file: we write inline-start and inline-end, and the browser mirrors the page by itself when an Arabic visitor arrives (). The only physical sides left are the two borders that DRAW the little caret beside a table heading: a drawn shape that used a logical side would become a different shape in Arabic. Section 12 says what is left to do by hand - and it is very little. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE SORTABLE TABLE A real table of real numbers: the nine languages this site speaks, their native names, whether they run right to left, and how many countries of our own country data list each one. Press a heading to sort, type to filter. The rows are built by JavaScript, so the table is empty until the script fills it. --ft-alt is the colour of every second row: it is declared HERE so the light panel in section 11 can turn it into a dark veil on light paper. -------------------------------------------------------------------------- */ .ft-tablewrap { display: grid; gap: var(--sp-3); min-inline-size: 0; padding-block: var(--sp-4) var(--sp-5); padding-inline: var(--sp-4); background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r-3); --ft-alt: rgba(244, 246, 250, .04); } /* The table reuses the SHAPE of the comparison table on the service pages (file 002: a fixed layout, so one long word cannot push the page sideways), but it sits on a dark panel, so its lines and words are the dark variants used everywhere else on this page. */ .ft-table { inline-size: 100%; table-layout: fixed; border-collapse: collapse; font: 400 var(--fs-small)/1.5 var(--font-text); color: var(--text-dk); } .ft-table__cap { text-align: start; padding-block-end: var(--sp-2); color: var(--muted-dk); font: 400 var(--fs-micro)/1.6 var(--font-text); } .ft-table th, .ft-table td { padding-block: 10px; padding-inline: var(--sp-3); text-align: start; vertical-align: top; border-block-end: 1px solid var(--line-dk); } .ft-table thead th { background: none; /* file 002 paints this row white: not here */ border-block-end-color: var(--line-dk-2); font: 600 var(--fs-micro)/1.4 var(--font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-dk); } /* The first column is the language, the one the eye reads first: it keeps the bright text while the other three stay quieter. */ .ft-table tbody td:first-child { color: var(--text-dk); font-weight: 500; } .ft-table tbody tr:nth-child(even) { background: var(--ft-alt); } .ft-table td { font-variant-numeric: tabular-nums; } /* The heading is a BUTTON: the table sorts with a mouse, a finger or the Tab key. */ .ft-sort { display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; cursor: pointer; } .ft-sort:hover { color: var(--brand-hi); } /* The caret that tells the visitor which column decides the order. It is drawn with two PHYSICAL borders (border-right and border-bottom) on purpose: a physical side never swaps over, so the caret is the same shape for an Arabic visitor and needs no rule in section 12 - exactly what we want for a shape whose whole meaning is "down" or "up". */ .ft-sort::after { content: ""; inline-size: 7px; block-size: 7px; flex: 0 0 auto; border-right: 2px solid transparent; border-bottom: 2px solid transparent; transform: rotate(45deg); /* the caret points DOWN: A to Z */ margin-block: 0 3px; } /* The sorted column is marked twice over: brighter words, and a bright caret whose aria-sort on the th tells a screen reader the same thing. */ .ft-table th[aria-sort="ascending"] .ft-sort, .ft-table th[aria-sort="descending"] .ft-sort { color: var(--text-dk); } .ft-table th[aria-sort="ascending"] .ft-sort::after, .ft-table th[aria-sort="descending"] .ft-sort::after { border-color: var(--brand-hi); } .ft-table th[aria-sort="descending"] .ft-sort::after { transform: rotate(225deg); /* the same caret turned round */ margin-block: 3px 0; } /* On a phone (below 640px) file 002 already turns every row into a small stack of label and value, so nothing is cut off sideways; the heading row goes with it, the filter box above still works, and the headings come back on a wider screen. */ /* -------------------------------------------------------------------------- 2. THE CHART AND THE DRAWN PICTURE The chart is an inline SVG drawing, not a picture file, of what this site is really made of in bytes: the percentages were measured from the real files at build time, so the picture cannot flatter us - and it is sharp on every screen. -------------------------------------------------------------------------- */ .ft-chart { margin: 0; padding-block: var(--sp-5) var(--sp-4); padding-inline: var(--sp-5); background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r-3); } .ft-chart svg { inline-size: 100%; block-size: auto; } /* The four bars start flat and grow to their real height when the visitor scrolls to them: the script writes the y and the height, this transition makes the change smooth. A visitor who asked for less movement just sees them. */ .ft-chart rect[data-pct] { transition: y var(--t-slow) var(--ease), height var(--t-slow) var(--ease); } .ft-chart text { font-family: var(--font-text); font-size: 11px; fill: var(--muted-dk); } .ft-chart figcaption { margin-block-start: var(--sp-3); color: var(--muted-dk); } /* The drawn picture itself, shared by the carousel, the gallery, the reveal cards and the before/after slider. It has a fixed 320 by 180 shape, so it always fills its box and can never be a photograph that goes stale. */ .ft-art { display: block; inline-size: 100%; block-size: auto; } /* -------------------------------------------------------------------------- 3. THE GALLERY AND ITS LIGHTBOX Twelve drawn pictures in the space of three. Pressing one opens it full size in a : the browser brings the backdrop and the Escape key; we paint the frame. -------------------------------------------------------------------------- */ .ft-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--sp-2); } .ft-gallery__item { padding: 0; border: 1px solid var(--line-dk-2); border-radius: var(--r-2); background: var(--ink-2); overflow: hidden; cursor: pointer; transition: border-color var(--t-med), transform var(--t-med) var(--ease); } .ft-gallery__item:hover, .ft-gallery__item:focus-visible { border-color: var(--brand-hi); transform: translateY(-2px); } .ft-gallery__item .ft-art { aspect-ratio: 16 / 9; } .ft-lightbox { inline-size: min(880px, calc(100vw - 32px)); padding: var(--sp-3); border: 1px solid var(--line-dk-2); border-radius: var(--r-3); background: var(--ink-2); color: var(--text-dk); box-shadow: var(--sh-3); } .ft-lightbox::backdrop { background: rgba(0, 0, 0, .72); } .ft-lightbox__art { display: grid; place-items: center; min-block-size: 120px; } .ft-lightbox__art .ft-art { border-radius: var(--r-2); } .ft-lightbox .btn { margin-block-start: var(--sp-3); } /* -------------------------------------------------------------------------- 4. BEFORE AND AFTER Two drawings stacked in ONE grid cell. The "before" drawing lies on top and is a window anchored at the inline-start edge: the handle below only makes that window narrower, so the visitor pushes the old page aside and the new one is uncovered. 0 shows the new page only, 100 the old one only. Nothing here is a photograph, and the two tags carry the only words. -------------------------------------------------------------------------- */ .ft-ba { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .ft-ba__panel { grid-area: 1 / 1; position: relative; overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line-dk-2); border-radius: var(--r-2); background: var(--ink-2); } .ft-ba__after, .ft-ba__after .ft-art { inline-size: 100%; block-size: 100%; } /* The window that slides. Its own width is 100% until the script shortens it, and the drawing inside keeps the FULL width of the stage (its height is the stage height and its width follows its own 320 by 180 shape), so the visitor sees the old page CROPPED, never squashed. Anchoring the window at the inline-start edge is what makes it open from the right in Arabic unaided. */ .ft-ba__before { inline-size: 100%; justify-self: start; border-inline-end: 2px solid var(--brand-hi); /* the edge of the handle */ } .ft-ba__before .ft-art { block-size: 100%; inline-size: auto; max-inline-size: none; } .ft-ba__tag { position: absolute; inset-block-start: var(--sp-2); inset-inline-start: var(--sp-2); z-index: 1; padding: 3px 10px; border: 1px solid var(--line-dk-2); border-radius: var(--r-pill); background: rgba(0, 0, 0, .74); color: var(--text-dk); font: 600 var(--fs-micro)/1.6 var(--font-text); } .ft-ba__range { grid-area: 2 / 1; inline-size: 100%; accent-color: var(--brand-hi); } /* -------------------------------------------------------------------------- 5. TWO SMALL CORRECTIONS TO THE TIMELINE AND THE PLANS The page shows the REAL five-step timeline and the REAL three packages from the service pages: the markup is a copy, and its look belongs to file 002. Two things must change. First, those blocks were drawn for a light page and now sit on a DARK panel, so their lines and words are turned dark-friendly exactly as file 002 does in its own dark sections. Second, this panel is narrower than a full page, so the steps and the cards are pulled a little tighter to keep the block readable. -------------------------------------------------------------------------- */ .ft-steps { gap: clamp(14px, 1.8vw, 22px); } .ft-steps .step__num { background: var(--ink); border-color: var(--line-dk-2); color: var(--brand-hi); } .ft-steps .step + .step::before { background: var(--line-dk-2); } .ft-steps .step__title { color: var(--text-dk); } .ft-demo#ft-demo-plans .plans { gap: clamp(12px, 1.6vw, 20px); } .ft-demo#ft-demo-plans .plan { background: var(--ink-3); border-color: var(--line-dk); padding: clamp(18px, 2.2vw, 26px); } .ft-demo#ft-demo-plans .plan__name, .ft-demo#ft-demo-plans .plan__price { color: var(--text-dk); } .ft-demo#ft-demo-plans .plan__fit, .ft-demo#ft-demo-plans .plan__unit, .ft-demo#ft-demo-plans .plan__local { color: var(--muted-dk); } /* The "most businesses choose this one" card is already the darkest of the three, so on a dark panel it stands out by its edge and its position instead of rising into the air, which would look like a mistake on a panel that is already lifted off the page. */ .ft-demo#ft-demo-plans .plan--featured { transform: none; background: var(--ink); } /* -------------------------------------------------------------------------- 6. THE NINE LANGUAGES (a real control, not a picture of one) The list is filled by JavaScript from the site's own language list, so these are the nine languages this page really speaks, in their own letters. The row of the language being read wears a small teal rail on its inline-end edge. -------------------------------------------------------------------------- */ .ft-lang { display: grid; gap: var(--sp-3); padding-block: var(--sp-4); padding-inline: var(--sp-4); background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r-3); } .ft-lang__list { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-2); } .ft-lang__btn { inline-size: 100%; min-block-size: 44px; /* a finger needs about this */ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: 8px; padding-inline: var(--sp-3); border: 1px solid var(--line-dk-2); border-radius: var(--r-2); background: var(--ink-2); color: var(--text-dk); text-align: start; font: 500 var(--fs-small)/1.5 var(--font-text); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); } .ft-lang__btn:hover { border-color: var(--brand-hi); color: var(--brand-hi); } .ft-lang__btn[aria-current="true"] { background: rgba(0, 113, 227, .22); border-color: var(--brand-hi); } /* The rail is simply the last thing in the row, so it travels to the other side by itself in Arabic: a flex row follows the reading direction. */ .ft-lang__btn[aria-current="true"]::after { content: ""; inline-size: 3px; block-size: 18px; border-radius: 2px; background: var(--teal); } /* -------------------------------------------------------------------------- 7. THE PRICE IN THE VISITOR'S OWN MONEY Our published price is in US dollars; the second line is filled by the currency script that is already live on the packages page, from the country the visitor arrived from. That line is reserved before it is filled, so the panel cannot jump under the visitor's eyes when the rate arrives. -------------------------------------------------------------------------- */ .ft-currency { display: grid; gap: var(--sp-1); padding-block: var(--sp-5); padding-inline: var(--sp-5); background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r-3); } .ft-currency__label { font: 500 var(--fs-micro)/1.5 var(--font-text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dk); } /* A figure, not a sentence: unicode-bidi: isolate keeps the dollars and the commas in their own order inside a page that runs the other way. */ .ft-currency__value { font: 700 clamp(2rem, 4vw, 2.75rem)/1.05 var(--font-display); color: var(--text-dk); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .ft-currency__local { min-block-size: 1.5em; font: 500 var(--fs-lead)/1.5 var(--font-text); color: var(--brand-hi); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 8. THE CHAT WINDOW (a laid-out window, honestly labelled as a layout) A small window: a title bar at the top, one message, and the row where a visitor would type. Nothing is sent anywhere - the block says so itself, in the visitor's own language. The title bar is DRAWN here, so the markup needs no extra element. -------------------------------------------------------------------------- */ .ft-chat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); position: relative; max-inline-size: 440px; overflow: hidden; padding-block: calc(var(--sp-4) + 28px) var(--sp-4); padding-inline: var(--sp-4); background: var(--ink-3); border: 1px solid var(--line-dk-2); border-radius: var(--r-3); box-shadow: var(--sh-2); } .ft-chat::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 28px; background: var(--ink-2); border-block-end: 1px solid var(--line-dk); } .ft-chat::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: var(--sp-4); inline-size: 26px; block-size: 2px; border-radius: 2px; background: var(--line-dk-2); } /* Every line of the window spans the full width except the last row, where the field and the Send button sit side by side. */ .ft-chat > * { grid-column: 1 / -1; } .ft-chat > .ft-chat__in { grid-column: 1; } .ft-chat > .btn { grid-column: 2; align-self: center; } /* The message: about 34 characters wide, which is the comfortable reading width of a chat bubble. The honest note below keeps its own quieter look and its own class, so it is left alone here. */ .ft-chat > p:not(.ft-note) { max-inline-size: 34ch; padding-block: 10px; padding-inline: var(--sp-3); border: 1px solid var(--line-dk); border-radius: var(--r-2); background: var(--ink-2); color: var(--text-dk); font: 400 var(--fs-small)/1.6 var(--font-text); } /* 16px on purpose: an iPhone zooms the whole page when a focused field is smaller than that, and the visitor is thrown out of the layout. */ .ft-chat__in { min-block-size: 44px; padding-block: 10px; padding-inline: var(--sp-3); border: 1px solid var(--line-dk-2); border-radius: var(--r-pill); background: var(--ink-2); color: var(--text-dk); font: 400 1rem/1.4 var(--font-text); } .ft-chat__in::placeholder { color: var(--muted-dk); opacity: 1; } .ft-chat__in:focus { border-color: var(--brand-hi); } /* -------------------------------------------------------------------------- 9. THE BOOKING CALENDAR (honestly a layout too: no diary is attached) Seven columns of days for the month the visitor is really in, built by JavaScript from the visitor's own browser, so the weekday names are in the visitor's language and today is today. Past days cannot be chosen. A grid follows the reading direction, so in Arabic the week starts at the right. -------------------------------------------------------------------------- */ .ft-cal { display: grid; gap: var(--sp-3); max-inline-size: 420px; padding-block: var(--sp-4); padding-inline: var(--sp-4); background: var(--ink-3); border: 1px solid var(--line-dk); border-radius: var(--r-3); } .ft-cal__head { font: 700 var(--fs-small)/1.4 var(--font-display); color: var(--text-dk); text-align: center; } .ft-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .ft-cal__day { display: grid; place-items: center; min-block-size: 36px; padding: 0; border: 1px solid transparent; border-radius: var(--r-1); background: none; color: var(--text-dk); font: 500 var(--fs-small)/1 var(--font-text); font-variant-numeric: tabular-nums; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .ft-cal__day:hover { background: rgba(244, 246, 250, .08); } .ft-cal__day[aria-selected="true"], .ft-cal__day[aria-pressed="true"] { background: rgba(0, 113, 227, .22); border-color: var(--brand-hi); color: var(--brand-hi); } /* A day that has already gone is not offered, and it must look unofferable without relying on colour alone: it is dimmed and the hand disappears. */ .ft-cal__day[disabled] { color: var(--muted-dk); opacity: .5; cursor: default; } /* -------------------------------------------------------------------------- 10. THE NEWSLETTER FORM (a layout demonstration: the address is never sent) One field and one button on a line, the honest note underneath, on a line of its own whatever the width of the screen. The field is 48px tall with 16px text for the same reason as the chat field above. -------------------------------------------------------------------------- */ .ft-news { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); } .ft-news input[type="email"] { flex: 1 1 240px; min-inline-size: 0; min-block-size: 48px; padding-block: 12px; padding-inline: var(--sp-4); border: 1px solid var(--line-dk-2); border-radius: var(--r-pill); background: var(--ink-3); color: var(--text-dk); font: 400 1rem/1.4 var(--font-text); } .ft-news input[type="email"]::placeholder { color: var(--muted-dk); opacity: 1; } .ft-news input[type="email"]:focus { border-color: var(--brand-hi); } .ft-news > p { flex: 1 1 100%; } /* -------------------------------------------------------------------------- 11. THE LIGHT PANEL (a light island in a dark page) This one is a demonstration in itself: a section can be LIGHT while the whole site is DARK, and it is done without rewriting a single block. The panel re-points the few colour TOKENS that every other rule already reads, so the blocks inside it are drawn in the day colours while the page around them stays night. Put it around any block of this page. --ink itself is deliberately NOT re-pointed: the site's light button takes its word colour from --ink, and it would turn white-on-white. -------------------------------------------------------------------------- */ .ft-light { --ink-2: var(--paper-2); --ink-3: var(--tint); --line-dk: var(--line); --line-dk-2: var(--line-2); --text-dk: var(--text); --muted-dk: var(--muted); --brand-hi: var(--brand); --teal: var(--ok); --ft-alt: rgba(0, 0, 0, .04); background: var(--paper-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--r-3); padding-block: clamp(20px, 2.6vw, 32px); padding-inline: clamp(20px, 2.6vw, 32px); } /* One button needs its edge back: the ghost button of a dark panel is drawn with a light border that would vanish on white paper. */ .ft-light .btn--ghost { border-color: var(--line-2); } /* -------------------------------------------------------------------------- 12. RIGHT TO LEFT (Arabic) Our translation engine sets the moment an Arabic visitor arrives, and nearly everything above mirrors itself, because every side is written as inline-start or inline-end. This section holds ONLY what cannot mirror itself, plus, in plain words, what is deliberately left as it is. (a) WHAT NEEDS A RULE - a rounded corner is physical even when the border beside it is logical. File 005 puts a coloured rail on the inline-start edge of the sentence that is read aloud, and rounds the two corners on the physical RIGHT. In Arabic that rail moves to the right, so those corners must move to the left, or the shape is rounded on the same side as its rail and looks broken. (b) WHAT NEEDS NO RULE, AND WHY - the grey caret beside a table heading is drawn with the physical borders border-right and border-bottom, so it never swaps and points down in every language. The gallery, the before/after window, the calendar, the language rows, the chat title bar and the two rails are placed with logical sides, so they mirror by themselves; and the two fills (the reading line across the top of the window, the meters in file 005) are block boxes whose width the script writes, so they grow from the start edge - the right one in Arabic. (c) TWO THINGS THAT STAY AS THEY ARE, AND WHY - the carousel moves its track with translateX, which is physical, and a stylesheet cannot know which slide is being shown: only the script does, and it works in both directions, because in Arabic the track starts at the right and the same step uncovers the next picture. The chart is a picture of four bars with four words underneath, built once; mirroring the bars alone would put every word under the wrong bar, so the drawing keeps its own left-to-right order in every language, as a chart in a printed Arabic newspaper does. -------------------------------------------------------------------------- */ [dir="rtl"] .ft-speak__src { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: var(--r-2); border-end-end-radius: var(--r-2); } /* Arabic letters join each other and are drawn taller than Latin ones, so the dense rows of a table and a calendar need more leading. Same reason file 004 raises the rows of its country list; letter-spacing is switched off for Arabic once, in file 003. */ html[lang="ar"] .ft-table th, html[lang="ar"] .ft-table td { line-height: 1.8; } html[lang="ar"] .ft-cal__day { line-height: 1.9; } /* -------------------------------------------------------------------------- 13. PRINTING (the demonstration blocks, the whole page) On paper there is no pointer, no keyboard, no sound and no scrolling, so a demonstration is no longer a demonstration: it is a picture of one. These rules give every block its FINAL, quiet, readable state on white paper, in addition to file 003's print rules (which take the header, the footer, the moving strip and the hero drawing off the sheet). They touch nothing but the ft- blocks, and the greys are plain greys: a printer prints ink, not tokens. -------------------------------------------------------------------------- */ @media print { .ft-demo, .ft-tablewrap, .ft-chart, .ft-lang, .ft-currency, .ft-chat, .ft-cal, .ft-light { background: #fff !important; color: #000 !important; border-color: #999 !important; box-shadow: none !important; break-inside: avoid; } .ft-table th, .ft-table td, .ft-table__cap, .ft-lang__btn, .ft-currency__label, .ft-currency__value, .ft-currency__local, .ft-chat__in, .ft-news input[type="email"], .ft-cal__day, .ft-ba__panel { color: #000 !important; border-color: #999 !important; } .ft-table tbody tr:nth-child(even) { background: transparent !important; } .ft-chart text { fill: #333 !important; } .ft-chart rect[data-pct] { transition: none !important; } .ft-sort::after { border-color: #000 !important; } /* Twelve tiles print four to a row, and no tile is split over two sheets. */ .ft-gallery { grid-template-columns: repeat(4, 1fr) !important; } .ft-gallery__item { break-inside: avoid; } /* A lightbox is opened by the visitor: on paper it has no meaning at all. */ .ft-lightbox { display: none !important; } /* The slider is frozen half way so BOTH states are on the sheet, and the handle itself is not printed. */ .ft-ba__before { inline-size: 50% !important; } .ft-ba__range { display: none !important; } /* A day that cannot be chosen is printed faintly, so the reader sees the real state of the calendar. */ .ft-cal__day[disabled] { opacity: 1; color: #777 !important; } } /* End of TWSS_styles_006.css - the data half and the business half of the Features page, and the right-to-left overrides. */