carto.css

// Languages: name (local), name_en, name_fr, name_es, name_de
@name: '[name_en]';
// Fonts //
@sans: 'Arial Unicode MS Regular';
@sans_italic: 'Arial Unicode MS Regular';
@sans_bold: 'Arial Unicode MS Bold';
// Common Colors //
@land: #fff;
@water: #ccc;
@admin: #000;
@road: #666;
Map { background-color: @land; }
#water {
  polygon-fill: @water;
  polygon-pattern-file: url("pattern.svg");
  polygon-pattern-opacity: 0.1;
}
#water_label {
  [zoom<=13],  // automatic area filtering @ low zooms
  [zoom>=14][area>500000],
  [zoom>=16][area>10000],
  [zoom>=17] {
    text-name: @name;
    text-face-name: @sans;
    text-fill: darken(@water, 30%);
    text-size: 13;
    text-wrap-width: 100;
    text-wrap-before: true;
  }
}
#waterway {
  [type='river'],
  [type='canal'] {
    line-color: @water;
    line-width: 0.5;
    [zoom>=12] { line-width: 1; }
    [zoom>=14] { line-width: 2; }
    [zoom>=16] { line-width: 3; }
  }
  [type='stream'] {
    line-color: @water;
    line-width: 0.5;
    [zoom>=14] { line-width: 1; }
    [zoom>=16] { line-width: 2; }
    [zoom>=18] { line-width: 3; }
  }
}
// Roads & Railways //
#tunnel { opacity: 0.5; }
#building {
    polygon-fill: #666;
  [zoom>=10] {
    line-width: 0;
    polygon-opacity: 0;
  }
  
  [zoom>=15] {
    polygon-fill: #666;
    line-color: #888;
    line-width: 0;
    polygon-opacity: 0.2;
  }
  [zoom>=16] {
    opacity: 0.1;
    line-width: 0.8;
  }
  [zoom>=17] {
    opacity: 0.4;
    line-width: 1;
  }
}
#landuse {
  polygon-pattern-file: url("forest4.svg"); 
  [zoom>=10] { opacity: 0; polygon-pattern-opacity: 0;}  
  [zoom>=15] { opacity: 0.2; polygon-pattern-opacity: 0.5;}  
  [zoom>=16] { opacity: 0.6; }
}
#road,
#tunnel,
#bridge {
    
      line-color: @road;
      line-opacity: 0;
    [class='motorway'],
    [class='main'] {
      line-opacity: 1;
      [zoom>=10] { line-width: 1; }
      [zoom>=13] { line-width: 1.4;}
      [zoom>=14] { line-width: 2.8;}
      [zoom>=15] { line-width: 3; }
    
      [zoom>=16] { 
        ::fill {
          line-width: 6; 
          line-color: darken(@road, 10%);
        }
      
        ::border {
          line-width: 4;
          line-color: lighten(@road, 10%);
        }
    }
      [zoom>=17] { 
        ::fill {
          line-width: 8; 
          line-color: darken(@road, 10%);
        }
      
        ::border {
          line-width: 6;
          line-color: lighten(@road, 10%);
        }
    }
    
    }
    
  
    [class='street'], [class='street_limited'],
    [class='service'], [class='driveway'], 
    [class='minor_rail'] {
      [zoom>=10] { line-width: 0; line-opacity: 0;}
      [zoom>=13] { line-width: 0.8; line-opacity: 0.2;}    
      [zoom>=14] { line-width: 0.8; line-opacity: 0.4;}
      [zoom>=15] { line-width: 1.4; line-opacity: 0.7;}
      [zoom>=16] { line-width: 2; }
      [zoom>=17] { line-width: 4; }
    }
  
    [class='street_limited'] { line-dasharray: 4,1; }
}
// Political boundaries //
#admin [admin_level=4] {
  line-join: round;
  line-color: @admin;
  line-width: 1.4;
  [disputed=1] { line-dasharray: 4,4; }
}
#admin [admin_level=2] {
  line-join: round;
  line-color: #f00;
  line-width: 1.4;
  [disputed=1] { line-dasharray: 4,4; }
}
#country_label {
  text-name: @name;
  text-face-name: @sans;
  text-fill: #ff0000;
  text-size: 14;
}
#country_label_line { 
  line-color: #ff0000; 
}
#place_label[localrank<=2] {
  [type='city'][zoom<=15] {
    text-name: @name;
    text-face-name: @sans_bold;
    text-fill: #444;
    text-size: 16;
    [zoom>=10] { text-size: 18; }
    [zoom>=12] { text-size: 24; }
  }
  [type='town'][zoom<=17] {
    text-name: @name;
    text-face-name: @sans;
    text-fill: #333;
    text-size: 14;
    [zoom>=10] { text-size: 16; }
    [zoom>=12] { text-size: 20; }
  }
  [type='village'] {
    text-name: @name;
    text-face-name: @sans;
    text-fill: #444;
    text-size: 12;
    [zoom>=12] { text-size: 14; }
    [zoom>=14] { text-size: 18; }
  }
  [type='hamlet'],
  [type='suburb'],
  [type='neighbourhood'] {
    text-name: @name;
    text-face-name: @sans;
    text-fill: #666;
    text-size: 12;
    [zoom>=14] { text-size: 14; }
    [zoom>=16] { text-size: 16; }
  }
}